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

admin2024-05-15  0

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>
  );
}
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!