hooks

168 阅读2分钟

useMemo

将父组件传给子组件的值缓存下来,当第二个参数状态发生变化时子组件才渲染;

useCallback

将父组件传给子组件的方法缓存下来,当第二个参数状态发生变化时子组件才渲染;

useEffect

hooks生命周期 、 清楚副作用( 为防止内存泄漏,清除函数会在执行 )

  • effect(副作用):指那些没有发生在数据向视图转换过程中的逻辑,如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。
  • 副作用操作 可以分两 类: 需要清除的和不需要清除的

useState

可同步可异步

useReducer

const [state, dispatch] = useReducer(reducer, initialState, initfun);

initfun: 一个惰性初始化函数,可以用来进行复杂的计算,然后返回最终的 initialState

useRef

返回的 ref 对象在组件的整个生命周期内保持不变,也就是说每次重新渲染函数组件时,返回的ref 对象都是同一个(使用 React.createRef ,每次重新渲染组件都会重新创建 ref)

useRef 不仅仅是用来管理 DOM ref 的,它还相当于 this , 可以存放任何变量.

useRef 可以很好的解决闭包带来的不方便性. 你可以在各种库中看到它的身影, 比如 react-use 中的 useInterval , usePrevious ……

值得注意的是,当 useRef 的内容发生变化时,它不会通知您。更改.current属性不会导致重新呈现。 因为他一直是一个引用 .

useContext

const {state,abc} = useContext(CounterContext);

useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。你仍然需要在上层组件树中使用 <MyContext.Provider value={{state, abc}}> 来为下层组件提供 context