React Hooks优化

[Vibing]

React Hooks

react hooks 的てき使用しよう需要じゅよう在ざい function component 组件中ちゅう，本文ほんぶん讲述在ざい使用しよう react hooks 中ちゅう你需要注意ようちゅうい的てき一いち些事さじ情じょう

状じょう态每次じ改あらため变，整せい个 function 都会とかい重おも新しん执行

可能かのう导致：函数かんすう的てき每次まいじ执行，其内部ぶ定てい义的变量和わ方法ほうほう都会とかい重おも新しん创建，也就是ぜ说会从新给它们分配ぶんぱい内ない存そん，这会导致性能せいのう受到影かげ响

看み下面かめん这个例れい子こ：

import React, { useState, ReactElement } from 'react'
import { Button } from 'antd'

let num = 0; // 用よう于记录当前ぜん组件执行次数じすう

export default (): ReactElement => {
  console.log('render num: ', ++num) // 打だ印しるし执行次数じすう

  let [count, setCount] = useState(0)

  const handleClick = () => {
    setCount(++count)
  }

  return (
    <>
      <p>count: {count}</p>
      <Button type="primary" onClick={handleClick}>
        Button
      </Button>
    </>
  )
}

初はつ始はじめ化か时执行ぎょう了りょう一いち次じ：

现在我が点てん三さん次じ按钮，让 count 状じょう态改变：

可か见，每まい改あらため变一いち次じ count， 该组件けん对应的てき整せい个 function 会かい重じゅう新しん执行，其内部ぶ变量和わ方法ほうほう会かい重じゅう新しん创建，从而影かげ响性能せいのう。

解かい决方法ほう：

• 变量尽つき量りょう放ひ在ざい函数かんすう外部がいぶ
• 方法ほうほう使用しよう useCallback 包つつみ裹起来らい

使用しよう方法ほうほう：

const handleClick = useCallback(()=>{
    // 业务代だい码
},[ count ])

useCallback 的てき作用さよう：组件初はつ始はじめ化か时，将はた第だい一いち个参数すう函数かんすう“缓存”起おこり来らい，只ただ有ゆう在ざい第だい二に个参数すう（数すう组中的てき值）有ゆう变化时，被ひ包つつみ裹的函はこ数すう才さい会かい重じゅう新しん被ひ创建，否いや则不会かい重じゅう新しん创建。

总结：变量尽つき量りょう放ひ在ざい组件外部がいぶ定てい义，函数かんすう使用しよう useCallback 包つつみ裹起来らい，避免组件 render 时重复创建けん。

父ちち组件更新こうしん，子し组件也跟着ぎ执行

再さい看み个例子こ，我わが们把上面うわつら例れい子こ作さく为父组件，在ざい里さと面めん添加てんか一いち个子组件.

父ちち组件：

export default (): ReactElement => {
  let [count, setCount] = useState(0)

  const handleClick = useCallback(() => {
    setCount(++count)
  }, [count])

  return (
    <>
      <p>count: {count}</p>
      
      {/* 这里添加てんか一いち个子组件 */}
      <ChildrenComponent />

      <Button type="primary" onClick={handleClick}>
        Button
      </Button>
    </>
  )
}

子こ组件代だい码：

export default (): ReactElement => {
  console.log('children render')

  return <div>children component</div>
}

现在我わが再さい点てん三さん次じ按钮，让父组件 render 三さん次じ：

大だい爷的，子し组件打だ印しるし三さん次じ，表示ひょうじ执行了りょう三さん次じ。

这肯定こうてい不ふ是ぜ我わが想そう要よう的てき，我わが想そう要よう的てき是ぜ子こ组件需要じゅよう被ひ渲染的てき时候再さい去さ执行，那な么如何なん解かい决？

答こたえ：使用しよう React.memo。

React.memo 类似 class 组件里さと的てき PureComponent , 能のう帮助我わが们控制せい合ごう适重新しん渲染组件。

注意ちゅうい：说它类似，但ただし不完全ふかんぜん一いち样，它更像ぞう是ぜ PureComponent + shouldComponentUpdate 的てき结合。
PureComponent 通どおり过 props 和わ state 的てき浅あさ比ひ较来判断はんだん要よう不要ふよう重おも新しん渲染组件。

那な么在 react hooks 里ざと如何いか去さ写うつし呢

我わが们把子こ组件加か上じょう React.memo :

export default React.memo(
  (): ReactElement => {
    console.log('children render')

    return <div>children component</div>
  },
)

现在再さい点てん三さん次じ按钮：

可か见，子し组件不ふ再さい打だ印しるし，也就是ぜ不ふ再さい执行了りょう。

React.memo 也提供ていきょう了りょう shouldComponentUpdate 功こう能のう，用よう于自定てい义比较来决定是ぜ否ひ渲染：

React.memo(MyComponent, (prevProps, nextProps)=>{
 // 如果传递 nextProps 渲染会かい返かえし回かい与あずか传递 prevProps 渲染相しょう同どう的てき结果，则返回かい true，否いや则返回かい false.
 
 // return true:不ふ渲染  return false:渲染
})

总结

• 使用しよう useCallback 缓存定てい义的函数かんすう
• 使用しよう React.memo 避免不ふ必要ひつよう的てき render

如果有ゆう更さら好このみ的てき建けん议，请留言ごと，多た谢