字数

624 字

阅读时间

3 分钟

useEffect 是用来模拟生命周期的, useCallback和 useMemo 是用来优化性能的

如果用 useEffect ,即使第二个参数没发生变化,如果父组件发生变化了,也会重新执行第一个参数, 如果用 useCallback , 第二个参数没发生变化时,即使父组件发生变化了,也不会重新执行第一个参数.

Hook	关键字	主要用途	缓存对象
useEffect	副作用管理	执行副作用逻辑（请求、订阅等）	无缓存，执行逻辑
useCallback	函数缓存	缓存回调函数，避免子组件重渲染	函数
useMemo	计算结果缓存	缓存复杂计算结果，避免重复计算	任意值或对象

总结

• useMemo vs. computed

  • 都用于缓存计算结果，避免不必要的重复计算。
  • 适用于根据现有数据派生新数据的场景。

• useEffect vs. watch

  • 都用于监听数据变化，执行副作用函数。
  • 适用于处理异步操作、数据获取、事件监听等场景。

• useCallback 的特殊性

  • useCallback 用于缓存函数实例，优化子组件渲染性能。
  • 在 Vue 中，没有直接对应的概念，但可以通过将函数定义在 methods 中，并注意函数的引用关系，来达到类似的效果。

useEffect() 的生命周期模拟

副效应是随着组件加载而发生的，那么组件卸载时，可能需要清理这些副效应。

useEffect()允许返回一个函数，在组件卸载时，执行该函数，清理副效应。如果不需要清理副效应，useEffect()就不用返回任何值。

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
  subscription.unsubscribe();
  };
}, [props.source]);

上面例子中，useEffect()在组件加载时订阅了一个事件，并且返回一个清理函数，在组件卸载时取消订阅。

实际使用中，由于副效应函数默认是每次渲染都会执行，所以清理函数不仅会在组件卸载时执行一次，每次副效应函数重新执行之前，也会执行一次，用来清理上一次渲染的副效应。

贡献者

sunchengzhi

文件历史

最后编辑于 大约 2 个月前查看完整历史

de5fa-fix:修改文件名