【React】React Hooks 笔记

useState

添加组件内部的State
count State名
setCount State的修改方法
initValue State的初始值

const [count, setCount] = useState(initValue);

修改State不会把新的和旧的合并，只会覆盖。

useEffect

数据获取、订阅、修改DOM等是“副作用”操作，和componentDidMount、componentWillMount、componentDidUpdate具有相同用途

只在最顶层使用
在函数组件中使用

Hooks会按照定义顺序进行调用，为了保证每次更新都按照同样顺序调用。

默认渲染的时候就会执行useEffect，
1、第一个参数是回调函数，默认渲染的时候就执行；
2、回调函数里的return function 是返回一个组件销毁时执行的函数；
3、第二个参数是依赖，可以定义依赖，类似Vue的Watche，当依赖改变时候，useEffect会执行；

  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    const timer = setInterval(() => {
    console.log('msg');
    }, 1000);
    return function(){
    clearInterval(timer);
    }
    }, [new Date]);

useReducer是否可以异步?

Reducer Hook

如果返回值与当前state相同，则不会重新渲染子组件和副作用的执行。因为React 是使用 Object.is 比较算法来比较state。

useCallback

返回一个memorized 回调函数，有缓存的回调函数
依赖项发生改变时候会执行回调函数，依赖项目不作为回调函数的参数

把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染（例如 shouldComponentUpdate）的子组件时，它将非常有用。意思是有缓存，如果没有改变则使用缓存不重新执行回调函数。

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useMemo

返回一个memorized 值，有缓存的值。
创建新函数，把依赖项当做参数传入
类似于Vue中的compute

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

function MyComponent(props) {
    const computedVal = useMemo(() => props.a + props.b,
        [props.a, props.b]
    );
    return <div>{computedVal}</div>;
}