如何正确姿势使用 Hooks 优化性能? 🤔

如何正确姿势使用 Hooks 优化性能? 🤔

前言，你真的了解 Hooks 么? 今天看了一篇关于 Hooks 使用误区的一篇文章，ahooks 的作者从特别的角度，带我们重新认识 Hooks

文章 Url: React Hooks 使用误区，驳官方文档 (qq.com)

01 重新认识 Hooks

刚接触 Hooks 那会，大概看了下官方文档，官方一些 Hooks 可以用来优化性能，就屁颠屁颠到处使用 useState、useMemo、useCallback ，但是其实不然，优化性能这东西需要看场景的，并不是所有场景都适合得。例如，在很简单的基础类型计算时，可能 useMemo 并不划算，请问算 a+b 的消耗大？还是记录 a/b ，并比较a/b 是否变化的消耗大？反而还增加负担。

02 总结

上面的文章，作者讲很详细了。这边主要对上面的文章进行一个总结，以便后面查看：

• Hooks 依赖，只有变化时，需要重新执行 useEffect 的变量，才要放到 deps 中。而不是 useEffect 用到的变量都放到 deps 中。
• deps 参数并不可以解决闭包问题，可以使用 useRef
  • 正常情况不会有闭包问题
  • 延迟调用会存在闭包问题
    1. 使用 setTimeout、setInterval、Promise.then 等
    2. useEffect 的卸载函数

// 通过 ref 来记忆最新的 count
const countRef = useRef(count)
countRef.current = count

useEffect(() => {
  const timer = setTimeout(() => {
    console.log(countRef.current)
  }, 3000)
  return () => {
    clearTimeout(timer)
  }
}, [])

• 不建议使用 useCallback ，是要和 shouldComponentUpdate/React.memo 配套使用的，除非有个别非常复杂的组件，单独使用即可。

• useMemo 建议大量使用，但并不是无节制的使用(简单基础运算)

• useState 的正确使用姿势

  • 能通过state或prop 计算，就不需要使用 useState

  • 保证数据源唯一

    • 不要既存在 redux 中，又在组件中定义了一个 state 存储。
    • 不要既存在父级组件中，又在当前组件中定义了一个 state 存储。
    • 不要既存在 url query 中，又在组件中定义了一个 state 存储。

  • ​ useState 适当合并，不需要拆分过细，增加可读性

03 关于性能优化文章

送给 React 开发者十九条性能优化建议 (qq.com)