react组件渲染性能优化之函数组件-useCallback使用

useCallback主要就是对函数进行缓存,useCallBack这个Hooks主要是解决React.memo不能缓存事件的问题

useCallBack(fn, dependencies) ：fn想要缓存的函数，dependencies有关是否更新 fn 的所有响应式值的一个列表

比如：UseCallBackOptimize组件传递了一个事件函数给ChildCom2、ChildCom3，只要其中一个子组件调用这个事件就会影响到另一个子组件重新渲染一次,React.memo可以解决传值问题，但解决不了传递事件的问题。

示例：

styles.module.css

.container {
  width: 500px;
  height: 200px;
  border: 1px solid;
  margin: 0 auto;
}

.btnContainer {
  text-align: center;
}

.childComContainer {
  display: flex;
  justify-content: space-between;
}

import { useState, useCallback } from 'react'
import ChildCom2 from './components/ChildCom2'
import ChildCom3 from './components/ChildCom3'
import styles from "./styles.module.css"
export default function UseCallBackOptimize() {
  // 这是UseCallBackOptimize组件自身维护的状态
  const [counter, setCounter] = useState(0);
  // 这是传递给ChildCom2组件的数据
  const [counter1, setCounter1] = useState(0);
  // 这是传递给ChildCom3组件的数据
  const [counter2, setCounter2] = useState(0);
  //之所以子组件使用了memo后都无法阻止子组件之间互相影响，是因为每次重新渲染的时候都会生成一个圈新的test函数
  function test() {
    console.log("test");
  }
  console.log("UseCallBackOptimize组件渲染了")
  return (
    <div className={styles.container}>
      <div className={styles.btnContainer}>
        <div>{counter}</div>
          {/*点击修改数字时，ChildCom2和ChildCom3组件都会更新，原因看test上面*/}
        <button onClick={() => setCounter(counter + 1)}>+1</button>
      </div>
      <div className={styles.childComContainer}>
        <ChildCom2 counter={counter1} setCounter={setCounter1} test={test}/>
        <ChildCom3 counter={counter2} setCounter={setCounter2} test={test}/>
      </div>
    </div>
  );
}

import { memo } from "react"
function ChildCom2(props) {
    // 该子组件维护了一个自身的状态
    // const [counter, setCounter] = useState(0);
    console.log("ChildCom2 渲染了")
    return (
        <div style={{
            width: "200px",
            height: "100px",
            border: "1px solid"
        }}>
            ChildCom2
            <div>{props.counter}</div>
            <button onClick={() => props.setCounter(props.counter + 1)}>+1</button>
            <button onClick={() => props.test()}>test</button>
        </div>
    );
}

export default memo(ChildCom2);

import { memo } from "react"
function ChildCom3(props) {
    // 该子组件维护了一个自身的状态
    // const [counter, setCounter] = useState(0);
    console.log("ChildCom3 渲染了")
    return (
        <div style={{
            width: "200px",
            height: "100px",
            border: "1px solid"
        }}>
            ChildCom3
            <div>{props.counter}</div>
            <button onClick={() => props.setCounter(props.counter + 1)}>+1</button>
            <button onClick={() => props.test()}>test</button>
        </div>
    );
}

export default memo(ChildCom3);

本来调用ChildCom2的函数ChildCom3是不应该重新渲染的，使用useCallBack可以解决这个问题，两个子组件什么都不变的

解决后示例

import { useState, useCallback } from 'react'
import ChildCom2 from './components/ChildCom2'
import ChildCom3 from './components/ChildCom3'
import styles from "./styles.module.css"
export default function UseCallBackOptimize() {
  // 这是UseCallBackOptimize组件自身维护的状态
  const [counter, setCounter] = useState(0);
  // 这是传递给ChildCom2组件的数据
  const [counter1, setCounter1] = useState(0);
  // 这是传递给ChildCom3组件的数据
  const [counter2, setCounter2] = useState(0);
  //todo 之所以子组件使用了memo后都无法阻止子组件之间互相影响，是因为每次重新渲染的时候都会生成一个圈新的test函数
  /* function test() {
    console.log("test");
  } */
  // 使用了 useCallback 之后，针对test函数就做了一个缓存，如果依赖某个参数如counter，就在参数2[]里面传入进去
  const newTest = useCallback(function test() {
    console.log("test");
  }, [])
  console.log("UseCallBackOptimize组件渲染了")
  return (
    <div className={styles.container}>
      <div className={styles.btnContainer}>
        <div>{counter}</div>
        <button onClick={() => setCounter(counter + 1)}>+1</button>
      </div>
      <div className={styles.childComContainer}>
        <ChildCom2 counter={counter1} setCounter={setCounter1} test={newTest}/>
        <ChildCom3 counter={counter2} setCounter={setCounter2} test={newTest}/>
      </div>
    </div>
  );
}