React Hook 基础总结

 

useState

state setState ();

setState将重新渲染组件加入队列，后续的渲染每次将取得最新得state。

setState也可以传入函数，参数为最新的state，如果传入当前的state，将不触发子组件更新和effect

initialState也可以传入有返回默认值的函数，但都只会初始渲染执行一次

useState的setState不会合并对象

React 使用 Object.is比较算法 来比较 state。

 

 

useLayoutEffect

基本和useEffect一致,不过 会在所有DOM变更后执行

与 componentDidMount、componentDidUpdate 的调用阶段是一样的

可以读取到DOM

浏览器执行绘制前，useEffect

浏览器完成布局和绘制过后被调用

传入effect函数和依赖数组

effect函数将在组件渲染到屏幕后执行，可返回卸载函数，在组件卸载前执行

useContext

value ();

上层最近的Context.providoer更新时，该hook将触发重新渲染，即使受到memo和shouldComponentUpdate限制

渲染过大通过使用 memoization 来优化

 

useReducer

state dispatch (,,);

dispatch时稳定的，不会在组件渲染时改变，因此不用写到useEffect和useCallback依赖里面

初始值可以只有initialArg，也可以是上面的init(initialArg)

如果reducer返回的state和上一个一样，那也将跳过渲染

 

 

useCallback

memoizedCallback (()=>{doSomethinga b},[,],);

返回函数的memoized版本

useMemo

memoizedValue (()=>computeExpensiveValuea b a b返回值的我memoized版本，渲染期间执行，因此不要执行渲染无关操作

相当于 useRef

refContainer ();

可以索引dom，也可以索引state

 

useImperativeHandle

(,,[])

应当与 forwardRef 一起使用

craeteHandle返回一个对象到父组件的ref.current中

 

useDebugValue

()

待补充