06. useMemo解决Hooks 子组件重复渲染问题

当父组件state状态改变时，会使子组件重新渲染，导致消耗性能，在class组件中，一般使用shouldComponentUpdate来比较state，阻止子组件的重复渲染，在hook中需要使用useMemo

代码示例

• 使用前

  每点击一次按钮，更改父组件的num，就会重新渲染子组件，但是子组件并没有改变

  //父组件 Comp1.js
  import React,{useState} from 'react';
  import Child from './Child';
  function Comp1(){
    const [count,setCount] = useState(0);
    const [num,setNum] = useState(0);
    return (
      <div>
        <p>{num}</p>
        <button onClick={()=>{ setNum(num+1) }}>父组件单独使用值修改</button>
        <p>{count}</p>
        <button onClick={()=>{ setCount(count+1) }}>父子公用值修改</button>
  
        <Child count={count} />
      </div>
    )
  }
  export default Comp1;
  
  
  //子组件 Child.js
  import React from 'react';
  function Child(props){
    function workingCount(){
      console.log('子组件函数触发');
      return props.count+'_child'
    }
    let child_count = workingCount();
    return (
      <div> <div>{child_count}</div> </div>
    )
  }
  export default Child;
  
  //index.js
  import React from 'react';
  import ReactDOM from 'react-dom';
  import Comp1 from './Comp1';
  ReactDOM.render(<Comp1 />, document.getElementById('root'));
  

  • 使用后

  // 别的文件都一样，只改了child.js
  import React,{useMemo} from 'react';
  function Child(props){
    function workingCount(){
      console.log('子组件函数触发');
      return props.count+'_child'
    }
    // 使用方法：useMome(function(){},[])
    // useMome接收两个参数 
    // 第一个是个函数 是不想被调用的方法
    // 第二个是个数组，里面的值改变会触发第一个参数里面的函数
    let child_count = useMemo(()=>(workingCount()),[props.count]); 
    return (
      <div>
        <div>{child_count}</div>
      </div>
    )
  }
  export default Child;