react函数组件性能优化

目录

简言

性能优化点

React.memo

useCallback

useMemo

总结：

---

简言

一直以来，忙于项目，项目是真的繁琐，相信看到这篇文章得同学应该有相同的感触，（PS：项目害人呐，唯一能积累的可能就是业务场景了，搬砖搬砖，没完没了）。

虽然一直再用react写各个模块，但仔细想想却没时间真正的去研究它。趁个空挡，开始研究一下吧。后续我也开始慢慢更新一些react相关得文章，感兴趣得同学可以关注一下。

性能优化点

性能优化是个老生常谈得问题，更多的方法论可以在具体学习，针对react得函数组件，应该和类组件想要优化得点一样吧

• 减少重复得计算量 (某些复杂计算，可以避免就避免重复计算）
• 减少render次数 （React 里最重的一块就是 reconction(可以理解为 diff)，如果不 render，就不会 reconction,父组件更新，子组件明明没变化，也会跟着凑热闹）

咱就主要围着这两点去想办法吧。

React.memo

看代码：

// 父组件
import React, {useState} from 'react'
import Child from './child'

function Notice() {
  console.log('父组件render')
  const [fuName] = useState('父组件name传递')
  const [other, setOther] = useState('未改变')

  const handlClick = () => {
    console.log('父组件其他state变化')
    setOther('改变')
  }

  return (
    <div className="index">
      <h2>父组件:</h2>
      <button onClick={() => handlClick()}>父组件点击事件</button>
      <h2>子组件</h2>
      <Child name={fuName} />
    </div >
  )
}

export default Notice

// 子组件
import React, { useEffect } from 'react'

function Child(props) {
  console.log('子组件render')

  const childFn = () => {
    console.log('执行了子组件得useEffect')
  }

  useEffect(() => {
    childFn()
  }, [])

  return (
    <div>
      子元素，父组件传递到子组件：{props.name}
    </div >
  )
}

export default Child

此时渲染情况是

当我们点击父组件得btn时候

很明显，子组件又渲染了一次

但明明我们得props传值没变，改变这种状况，