🌟react 性能优化

1. SCU，shouldComponentUpdate（SCU 一定要配合不可变值使用）
考点： SCU 怎么用？ 背后的原理是什么？

shouldComponentUpdate(nextProps, nextStata) {
    if (nextState.count !== this.state.count) return true // 可渲染
  return false // 不可渲染
}

React中， 默认父组件更新， 子组件随之更新。SCU 默认返回 true。

• SCU默认返回true， 即React默认重新渲染所有子组件
• 必须配合“不可变值”一起使用

• 可先不用SCU， 有性能问题时再考虑使用

  2. PureComponent 纯组件 和 React.memo 备忘录

• PureComponent， SCU中实现浅比较（需要配合不可变值）

• memo， 函数组件中的PureComponent

• 浅比较已经使用大部分情况（尽量不要做深比较）

  3. 不可变值 immutable.js

• 基于共享数据， 深度好

  const map1 = Immutable.Map({a: 1, b: 2, c: 3})
  const map2 = map1.set('b', 50)
  map1.get('b') // 2
  map2.get('b') // 50

  🌟高阶组件
  组件公共逻辑抽离

• mixin, (已废弃)

• 高阶组件HOC
• Render Props

高阶组件基本用法（不是功能， 是工厂模式）

const HOCFactory = (Component) => {
    class HOC extends React.Component {
      consturctor () {
        this.state = {}
    }
      render() {
        /* 1. 透出posps  2. 自定义porp*/
        return <Component {...this.props} newProp={this.state}/>
    }
  }
}
const EnhancedComponent = HOCFactory(WrappedComponent)

考点： vue 如何实现高阶组件？
Render Props
核心： 通过一个函数将 class 组件的 state 作为 props 传递给纯函数组件。

<Facory render={
    ((props) => <p> {props.a} {props.b} ...</p>)
} />

• HOC： 模式简单， 但会增加组件层级。
• Render Props： 代码简介， 学习成本较高。