React.memo； react.memo 与useMemo区别

React.memo

React.memo介绍

• React.memo()是一个高阶组件
• 如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。
• React.memo 仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有 useState，useReducer 或 useContext 的 Hook，当 state 或 context 发生变化时，它仍会重新渲染。
• 默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。
• 用于性能优化，但请不要依赖它来“阻止”渲染，因为这会产生 bug。
• 只能在函数式组件中使用；类似于类组件中的（PureCompoment,shouldComponentupdate）
• react.memo中文文档

React.memo简单理解

• 高阶组件；用于性能优化；函数式组件中使用；通过比较props,如果props有变化则重新渲染组件，没有变化则不执行js不渲染，目的是为了阻止子组件被动渲染。

React.memo用法

• React.memo()可接受2个参数；
• 第一个参数是性能优化的目标组件；
• 第二个参数是比较函数，与shouldComponentUpdate()功能类似；

const ChildComponent = (props) =>{
  /* render using props */
}
const areEqual = (preProps,nextProps) => {
  /*如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false */
}
export default React.memo(ChildComponent,areEqual)

React.memo使用例子

• 比如：现有一个组件，每一秒都会重新渲染一次，对于子组件而言肯定不希望也跟着渲染，就需要用到React.memo（或PureComponent）。

import React,{useState}  from 'react';
//父组件
const FathComponent = () => {
  
  const [count, setCount] = useState(1);
  
  const onCount = () => {
    setCount(2)
  }
  
    return (
          <div>
              <Child seconds={1}/>
              <button onClick={onCount}>count</button>
          </div>
      )
}
export default FathComponent

//子组件
const Child = （props） => {
   console.log('I am rendering');
    return (
        <div> update every {props.seconds} seconds</div>
    )
}
export default Child

• 以上代码，点击按钮时子组件也会跟着执行打印；react中虽然子组件没有重新渲染DOM节点，但是会执行js代码；实际上我们只是触发了父组件的按钮，并不想让子组件执行，这时候就可以用到React.memo（或PureComponent）

//子组件
const Child = （props） => {
   console.log('I am rendering');
    return (
        <div> update every {props.seconds} seconds</div>
    )
}

export default React.memo(Child)

• 给子组件用React.memo包裹起来后，这样点击父组件按钮时就子组件就不会打印

//子组件
const Child = （props） => {
   console.log('I am rendering');
    return (
        <div> update every {props.seconds} seconds</div>
    )
}

const areEqua = (prevProps, nextProps) => {
   if(prevProps.seconds===nextProps.seconds){
        return true
    }else {
        return false
    }
}
export default React.memo(Child,areEqua)

• React.memo()可接受2个参数;第二个参数返回false，子组件才需要渲染；

react.memo 与useMemo区别

• react.memo 是 高阶组件；useMemo 是 hooks;
• react.memo 是 子组件本身是否渲染，可以进行粗粒度的性能优化；useMemo 是 一段函数逻辑是否重复执行，可以进行更加细粒度的性能优化；