React Hooks简单总结

hooks基础教程地址

https://www.bilibili.com/video/BV1y4411Q7yH?p=1

react hooks

react hooks必须在react 16.8及其以上版本才能生效

useState

const [count, setCount] = useState(0); // 数组解构
// 等同于
const _useState = useState(0);
const count = _userState[0];
const setCount = _userState[1];
// useState不能写在条件语句里面，它只能顺序执行

useEffect

useEffect 等同于componentDidMount(组件挂载的时候)和componentDidUpdate(组件更新的时候)与componentWillUnMount(组件被销毁前执行)三个个生命周期函数。
useEffect 是异步的，它不影响我们的render更新，但是实时计算页面大小就会出现问题，因为它是异步的。

const [count, setCount] = useState(0);
useEffect(() => {
    console.log('test content');
    return () => {
        consolo.log('count状态发生改变执行销毁');
    };
}, [count]);
// 如果不设置[]或者[count]，那么只要组件被更新都会执行componentWillUnMount，[]为当前组件被销毁前执行

组件通信

https://www.yuque.com/senkita/reviews/gbipsa

useReducer

useReducer更像是reducer的缩减实现方法

import React, {useReducer} from 'react';
function reducerDemo() {
    const [count, dispatch] = useReducer((state, action) => {
        switch(action) {
            case 'add':
                return state++;
            case 'sub':
                return state--;
            default: 
                return state;
        }
    }, 0)
    return (
        <div>
           <h1>{count}</h1> 
           <button onClick={() => dispatch('add')}>add</button>
           <br />
           <button onClick={() => dispatch('sub')}>sub</button>
        </div>
    );
}
export default reducerDemo;

useReducer + useContext实现redux

https://blog.csdn.net/pz1021/article/details/104763207

useMemo实现shoudComponentUpdate

https://blog.csdn.net/pz1021/article/details/104763207

useRef获取Dom，和input实现双向数据绑定并且赋值给变量

https://blog.csdn.net/pz1021/article/details/104763207

自定义Hooks函数

https://blog.csdn.net/pz1021/article/details/104763207