有些东西想不通
- hooks既然在函数式组件内用,那么函数是如何触发执行呢? 个人猜想(待验证):
- 组件内,通过监听useState创建值的改变,触发函数执行。
- 父组件执行时,渲染子组件触发函数执行。
-
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 更新。因此,请确保所有子组件也都是“纯”的组件。