React Hooks

1.useState

用于为函数组件引入状态（state）

2.useEffect

useEffect接收两个参数，第一个参数是一个回调函数，表示要执行的副作用操作，这个回调函数将会在组件渲染完成后执行。第二个参数是一个数组，表示副作用操作的依赖项，依赖项数组表示什么情况下需要重新运行 effect。useEffect允许返回一个函数，在组件卸载时，执行该函数，清理副效应。


useEffect(() => {
    const timeout = setTimeout(() => setVarA(varA + 1), 1000);
    return () => clearTimeout(timeout);
  }, [varA])

如果第二个参数数组为空，它就是componentDidMount，只有第一次渲染

如果第二个参数数组里面有值，它就是componentDidUpdate，只要其中任何一个state改变了，它就重新渲染

如果没有第二个数组（只有一个函数），则只要有任何一个state改变，它就重新渲染

用途

获取数据（data fetching）

事件监听或订阅（setting up a subscription）

改变 DOM（changing the DOM）

输出日志（logging）

3.useMemo

类似于Vue中的computed，防止无效函数调用，与子组件Memo进行搭配，提升渲染性能

返回值

在初次渲染时，useMemo 返回不带参数调用 calculateValue 的结果。

在接下来的渲染中，如果依赖项没有发生改变，它将返回上次缓存的值；否则将再次调用 calculateValue，并返回最新结果。


const [a, setA] = useState(0)
const [b, setB] = useState(0)
 
const sum =  useMemo(() => add(a, b),[a, b])

function add(a: number, b: number) {
  return a + b
}

4.useCallback

防止无效函数定义，与子组件Memo进行搭配，提升渲染性能

返回值

在初次渲染时，useCallback 返回你已经传入的 fn 函数

在之后的渲染中, 如果依赖没有改变，useCallback 返回上一次渲染中缓存的 fn 函数；否则返回这一次渲染传入的 fn。

5.useRef

使用用 ref 引用一个值

通过 ref 操作 DOM

6.useContext

读取和订阅组件中的 context。用法

向组件树深层传递数据

通过 context 更新传递的数据

指定后备方案默认值

覆盖组件树一部分的 context

在传递对象和函数时优化重新渲染

7.useReducer


import React, { useReducer } from 'react';
 
const App = () => {
    const [state, dispath] = useReducer((state, action) => {
        console.log(state);
        switch (action.type) {
            case 'increment':
                return state + 1;
            case 'decrement':
                return state - 1;
            default:
                return state;
        }
    }, 0);
 
    return (
        <div className='App'>
            <button onClick={() => dispath({ type: 'increment' })}>increment</button>
            <button onClick={() => dispath({ type: 'decrement' })}>decrement</button>
            <p>{state}</p>
        </div>
    );
};
 
export default App;