React.memo的使用场景及原理

memo的原理

语法：React.memo(组件);
使用场景：当父组件重新渲染，没必要重新渲染的子组件可以使用memo包起来。

function Child(props){
  console.log('Child');
  return (
    <button>Child</button>
  )
}
// memo：如果你想让一个函数组件有一个功能，如果属性不变，就不要刷新。
Child=React.memo(Child);
function App() {
  let [name,setName]=React.useState('zhufeng');
  return (
    <div> 
      /* 在input框中输入内容，会走setName导致App组件重新渲染，但是子组件Child也会进行渲染。 */
      /* 解决：子组件使用memo包起来 */
      <input type="text" value={name} onChange={ev=>setName(ev.target.value)} />
      <Child/>
    </div>
  )
}

memo的简单实现

function memo(OldComponent) {
  return class extends React.PureComponent {
    render() {
      return <OldComponent {...this.props} />
    }
  }
}