ReactHooks之父子组件传值优化

代码

import React, { useState, createContext, useContext } from "react";

function ChildComponent1({num,children}) {
  function changeNum1(){
    console.log(`ChildComponent1的数值为${num}`);
    return `Num1的数值为${num}`
  }
  const actionNum1 = changeNum1()
  return (
    <>
    <h2>父组件</h2>
    <div>{actionNum1}</div>
    <div>{children}</div>
    </>
  )
}

function ChildComponent2(props:any){
  function changeNum2(){
    console.log(`ChildComponent2的数值为${props.value}`);
    return `Num2的数值为${props.value}`
  }
  const actionNum2 = changeNum2()
  return (
    <>
    <h2>子组件</h2>
    <div>{actionNum2}</div>
    </>
  )
}

function App() {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(1);
  return (
    <>
    <button onClick={()=>{setNum1(num1+1)}}>num1+1</button>
    <button onClick={()=>{setNum2(num2+1)}}>num2+1</button>
    <ChildComponent1 num={num1}>
      <ChildComponent2 value={num2}/>
    </ChildComponent1>
    </>
  );
}
export default App;

代码解释

1. 一共有两个组件ChildComponent1 和ChildComponent2 ，其中ChildComponent2 为子组件
2. 两个组件都传入了一些值

操作

当我们改变的只是父组件中的状态的时候，我们会发现子组件中相关的函数也会执行，这个是非常消耗性能的事情

• 尽管子组件相关的状态没有改变

优化

我们使用useMemo就可以改变这种情况 官网

• 它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算
• 传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作

我们把相关的代码进行修改

  // 返回值的类型由箭头函数中return的函数的返回值决定
  const actionNum2 = useMemo(()=>{return changeNum2() },[props.value])  // 他会监测props.value的值是否改变，如果改变才会执行回调函数

• 当我们再次点击按钮改变父组件的数据，就会发现子组件改变函数就不在执行了

同理，我们在父组件加上如下代码

const actionNum1 = useMemo(()=>changeNum1(),[num]) 

那么只有num改变的时候，才会执行changeNum1函数，优化了性能，这样我们点击子组件的时候，父组件相关的函数不会执行了