hooks记录

149 阅读3分钟

有些东西想不通

  • hooks既然在函数式组件内用,那么函数是如何触发执行呢? 个人猜想(待验证):
  1. 组件内,通过监听useState创建值的改变,触发函数执行。
  2. 父组件执行时,渲染子组件触发函数执行。
  • useEffect既然是在DOM渲染后(init、更新)调用,那么return内的回调是何时调用? 查阅文档:return是在组件销毁前调用。

  • 函数组件的更新和初始化都是重新执行函数,区别是什么?分别由什么触发?

  • useContext是获取react上下文,什么是react上下文? 查阅文档:useContext获取最近的Provider的值。

  • hook之间的数据能共享吗?

有些东西意识不到

  • useReducer和redux无关,是react内部提供的状态机hook,作为useState的补充。
  • usehook从一个普通函数角度看,自身是没法知道是哪个组件调用它。
  • 多个useState其实都是同一个函数执行,react内部保存了状态,加以区分。
  • useEffect原理即,监听并获取依赖数组的更新,以新的值运行useEffect,每次重新创建回调函数,便于取新值。
  • 依赖数组,为undefined则不开启监听--一直更新保存的useEffect,为[]则开启监听,但没东西可以监听--永不更新保存的useEffect
  • React.memo & React.pureComponent之间区别和联系?

原汁原味

当 React 渲染组件时,会保存已使用的 effect,并在更新完 DOM 后执行它。这个过程在每次渲染时都会发生,包括首次渲染。

即使祖先使用 React.memo或 [shouldComponentUpdate],也会在组件本身使用 useContext 时重新渲染。

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)

记住,传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作,诸如副作用这类的操作属于 useEffect 的适用范畴,而不是 useMemo

你可以把 useMemo 作为性能优化的手段,但不要把它当成语义上的保证。 将来,React 可能会选择“遗忘”以前的一些 memoized 值,并在下次渲染时重新计算它们,比如为离屏组件释放内存。先编写在没有 useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo,以达到优化性能的目的。

请记住,当 ref 对象内容发生变化时,useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码,则需要使用回调 ref 来实现。

useLayoutEffect 其函数签名与 useEffect 相同,但它会在所有的 DOM 变更之后同步调用 effect。

忠言顺耳

我们建议从组件自身的角度命名 props,而不是依赖于调用组件的上下文命名。

React.PureComponent 中的 shouldComponentUpdate() 将跳过所有子组件树的 prop 更新。因此,请确保所有子组件也都是“纯”的组件。