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

前言

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


问题关键

    要想解决性能问题,关键在于组件重复渲染的处理。在使用 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第二个参数依赖项什么情况下使用呢,看下面的例子


//修改handleInputChangeconst 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 ...

    更多 hooks 的使用自行查看官方文档吧,这里就不做过多的介绍了。 

上一篇:基于Ubuntu系统下使用gcc和Makefile编译C语言程序


下一篇:Github 一键加速 ,支持 Win Mac !!!