React Hooks 性能优化，带你玩转 Hooks

这是我参与 8 月更文挑战的第 4 天，活动详情查看： 8月更文挑战

前言

React Hooks 出来很长一段时间了，相信有不少朋友已经深度使用了。无论是 react 本身还是其生态中,都在摸索着进步。鉴于我使用 react 的经验，给大家分享一下 React Hooks 性能优化可以从哪几个方面入手。至于 React Hooks 的使用方式，本文就不做过多的讲解了，可以自行查看react.docschina.org/docs/hooks-…

问题关键

要想解决性能问题，关键在于组件重复渲染的处理。在使用 React Hooks 后，很多人会抱怨渲染次数变多，比如我们会把不同的数据分成多个 state 变量，每个值的变化都会触发一次渲染。

举个例子

现在有个父子组件，子组件依赖父组件传入的 name 属性，但是父组件 name 属性和 text 属性变化都会导致 Parent 函数重新执行，所以即使传入子组件 props 没有任何变化，甚至子组件没有依赖于任何 props 属性，都会导致子组件重新渲染

const Child = ((props: any) => {
  console.log("公众号：前端开发爱好者 的子组件，我更新了...");
  return (
      <div>
          <h3>子组件</h3>
          <div>text:{props.name}</div>
          <div>{new Date().getTime()}</div>
      </div>
  )
})
const Parent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("")
  const handleClick = () => {
      setCount(count + 1);
  }
  const handleInputChange = (e) => {
      setText(e.target.value)
  }
  return (<div>
      <input onChange={handleInputChange} />
      <button onClick={handleClick}>+1</button>
       <div>count:{count}</div>
      <Child name ={text}/>
  </div>)
}

上面的代码执行你会发现，不管是触发 handleInputChange 还是触发 handleClick ，子组件都会在控制台输出我是前端开发爱好者的子组件，我更新了... 所以即使传入子组件 props 没有任何变化，甚至子组件没有依赖于任何 props 属性，子组件都会重新渲染。

想要解决重复渲染的问题，可以使用 react 的亲手制造升级的儿子，他有三个方法用来做优化，分别是 React.memo useCallback useMemo 。

React.memo : 和 class 组件时期的 PureComponent 一样，做简单额数据类型比较
useMemo : 可以用来比较复杂类型的数据，不如 Object Array 等
useCallback : 升级版本，用于控制传递函数时候控制组件是否需要更新

React.memo

使用 memo 包裹子组件时，只有 props 发生改变子组件才会重新渲染。使用 memo 可以提升一定的性能。


const Child = React.memo((props: any) => {
    console.log("公众号：前端开发爱好者 的子组件，我更新了..."); // 只有当props属性改变，集name属性改变时，子组件才会重新渲染
    return (
        <div>
            <h3>子组件</h3>
            <div>text:{props.name}</div>
            <div>{new Date().getTime()}</div>
        </div>
    )
})
const Parent = () => {
    const [count, setCount] = useState(0);
    const [text, setText] = useState("")
    const handleClick = () => {
        setCount(count + 1);
    }
    const handleInputChange = (e) => {
        setText(e.target.value)
    }
    return (<div>
        <input onChange={handleInputChange} />
        <button onClick={handleClick}>+1</button>
         <div>count:{count}</div>
        <Child name ={text}/>
    </div>)
}

但如果传入的 props 包含函数，父组件每次重新渲染都是创建新的函数，所以传递函数子组件还是会重新渲染，即使函数的内容还是一样。如何解决这一问题，我们希望把函数也缓存起来，于是引入 useCallback

useCallback

useCallback 用于缓存函数，只有当依赖项改变时，函数才会重新执行返回新的函数，对于父组件中的函数作为 props 传递给子组件时，只要父组件数据改变，函数重新执行，作为 props 的函数也会产生新的实例，导致子组件的刷新

使用 useCallback 可以缓存函数。需要搭配 memo 使用

const Child = React.memo((props: any) => {
    console.log("公众号：前端开发爱好者 的子组件，我更新了...");
   return (
       <div>
           <h3>子组件</h3>
           <div>text:{props.name}</div>
           <div> <input onChange={props.handleInputChange} /></div>
           <div>{new Date().getTime()}</div>
       </div>
   )
})
const Parent = () => {
   const [count, setCount] = useState(0);
   const [text, setText] = useState("")
   const handleClick = () => {
       setCount(count + 1);
   }
   const handleInputChange = useCallback((e) => {
       setText(e.target.value )
   },[])
   return (<div>
       <button onClick={handleClick}>+1</button>
       <div>count:{count}</div>
       <Child name={text} handleInputChange={handleInputChange}/>
   </div>)
}

useCallback 第二个参数依赖项什么情况下使用呢，看下面的例子


//修改handleInputChange
const handleInputChange =useCallback((e) => {
        setText(e.target.value + count)
    },[])

以上例子 count 改变会发生什么事呢？

count 改变，但 handleInputChange 不依赖与任何项，所以 handleInputChange 只在初始化的时候调用一次函数就被缓存起来，当文本改变时或者 count 改变时函数内部的 count 始终为 0，至于为什么需要看 useCallback 源码后解答。

所以需要将 count 加入到依赖项，count 变化后重新生成新的函数，改变函数内部的 count 值

const handleInputChange =useCallback((e) => {
        setText(e.target.value + count)
    },[count])

useMemo

useMemo 使用场景请看下面这个例子,getTotal 假设是个很昂贵的操作，但该函数结果仅依赖于 count 和 price，但是由于 color 变化，DOM 重新渲染也会导致该函数的执行，useMemo 便是用于缓存该函数的执行结果，仅当依赖项改变后才会重新计算

const Parent = () => {
    const [count, setCount] = useState(0);
    const [color,setColor] = useState("");
    const [price,setPrice] = useState(10);
    const handleClick = () => {
        setCount(count + 1);
    }
    const getTotal = ()=>{
        console.log("getTotal 执行了 ...") // 该函数依赖于count和price，但color变化也会导致该函数的执行
        return count * price
    }
    return (<div>

        <div> 颜色: <input onChange={(e) => setColor(e.target.value)}/></div>
        <div> 单价: <input value={price}  onChange={(e) => setPrice(Number(e.target.value))}/></div>
        <div> 数量:{count} <button onClick={handleClick}>+1</button></div>
        <div>总价:{getTotal()}</div>
    </div>)
}

修改后如下，注意 useMemo 缓存的是函数执行的结果

const Parent = () => {
    console.log("parent 执行了...")
    const [count, setCount] = useState(0);
    const [color,setColor] = useState("");
    const [price,setPrice] = useState(10);
    const handleClick = () => {
        setCount(count + 1);
    }
    const getTotal = useMemo(()=>{
        console.log("getTotal 执行了 ...")
        return count * price
    },[count, price])
    return (<div>

        <div> 颜色: <input onChange={(e) => setColor(e.target.value)}/></div>
        <div> 单价: <input value={price}  onChange={(e) => setPrice(Number(e.target.value))}/></div>
        <div> 数量:{count} <button onClick={handleClick}>+1</button></div>
        <div>总价:{getTotal}</div>
    </div>)
}

至此重复渲染的问题的解决基本上可以告一段落。

在 React 中是极力推荐函数式编程，可以让数据不可变性作为我们优化的手段。我在 React class 时代大量使用了 immutable.js 结合 redux 来搭建业务，与 React 中 PureComponnet 完美配合，性能保持非常好。但是在 React hooks 中再结合 typescript 它就显得有点格格不入了，类型支持得不是很完美。这里可以尝试一下 immer.js，引入成本小，写法也简洁了不少。

最后推荐一个比较好用的 hooks 库：ahooks : https://ahooks.js.org/zh-CN/hooks/async

ahooks 是一个 React Hooks 库，致力提供常用且高质量的 Hooks。针对性能优化也提供了相应的hooks, 例如： usePersistFn useCreation ...

最后

如果觉得本文对你有帮助，希望能够给我点赞支持一下哦 💪 也可以关注wx公众号：前端开发爱好者 回复加群，一起学习前端技能公众号内包含很多vue react 实战精选资源教程，欢迎关注