React 组件基本优化实践记录

Question

最常用的 shouldComponentUpdate

通过 shouldComponentUpdate 判断组件状态更新时是否重新渲染组件，如果 props 中数据对象数组有太多层慎用 <Component {...this.props} />

慎用setState

render 函数里面要用到的东西放 props/state（影响 view），其他变量则不放进去，写成模块内的私有变量（跨实例共享）或者组件实例上的变量。这样可以避免执行无效的 render 操作。

绑定事件写法

每次组件 render 时引用函数一样，所以当父组件 render 时不会导致 MyInput 组件重新渲染

update = (e) => {
  this.props.update(e.target.value)
}
render() {
  return <MyInput onChange={this.update} />
}

固定默认空对象或数组

接收后端参数值最好添加一个默认值防止出错，可在组件中添加一个componentDidCatch(error, info)捕捉错误

static defaultValue = {}
render () {
  return  <Item data={i || defaultValue} />
}

复杂状态与简单状态不共用一个组件

以下组件代码中，最好将 ul 列表部分抽出成一个纯组件。防止 input 值多次改变重新渲染组件也会将列表部分重新渲染。

change = (e) => {
  this.setState({ value: e.target.value });
}
render() {
  return (
    <div>
      <ul>
        {this.state.items.map((item, key) => <li key={key}>item</li>)}
      </ul>
      <input value={this.state.value} onChange={this.change} />
    </div>
  )
}

puerComponent

puerComponet 浅比较，shallowEqual 会比较 Object.keys(state | props) 的长度是否一致，每一个 key 是否两者都有，并且是否是一个引用，也就是只比较了第一层的值。state 改变频率高则不建议使用。

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps)
  || !shallowEqual(inst.state, nextState);
}

如果 PureComponent 里有 shouldComponentUpdate 函数的话，直接使用 shouldComponentUpdate 的结果作为是否更新的依据，没有 shouldComponentUpdate 函数的话，才会去判断是不是 PureComponent ，是的话再去做 shallowEqual 浅比较。推荐阅读React PureComponent 使用指南。

将无状态组件写成 functional components

const ImgComp = (props) => {
  return <img src={props.url} />;
}

constant elements

将不变的 HTML 代码抽离赋值给一个变量，jsx 会当成一个值减少解析过程。

const _ref = <span>Hello World</span>;
class Component extends Component {
  render() {
    return (
      <div className={this.props.className}>
        {_ref}
      </div>
    );
  }
}

利用修饰器处理传入connect参数

@connect(
  state => ({
    day: state.IndexReducers.day
  }),
  dispatch => ({
    setSendMessage: data => {
      dispatch(setSendMessageActions(data));
    }
  })
)
export default class App extends Component {
  // ...
}

引入 babel-react-optimize

引入 babel-preset-react-optimize preset 来提高 React 组件性能。该 preset 做了以下事情：

• transform-react-constant-elements 识别并转换可以转成常量的组件
• transform-react-remove-prop-types 删除 propTypes
• transform-react-pure-class-to-function 尽可能把 class 组件转为 functional 组件

利用 Perf 分析渲染性能

Perf 是 react 官方提供的性能分析工具，会展示出不必要的组件渲染次数。点击Chrome 插件地址安装。