UI5 的发展简React 最佳实践史介绍

一、前言

在日常开发和 Code Review 的时候，常常会发现一些共性的问题，也有很多值得提倡的做法。本文针对 React 技术栈，总结了一些最佳实践，对编写高质量的代码有一定的参考作用。

二、最佳实践 & 说明

多用 Function Component如果组件是纯展示型的，不需要维护 state 和生命周期，则优先使用 Function Component。它有如下好处：

1. 代码更简洁，一看就知道是纯展示型的，没有复杂的业务逻辑
2. 更好的复用性。只要传入相同结构的 props，就能展示相同的界面，不需要考虑副作用。
3. 更小的打包体积，更高的执行效率

function MenuItem({menuId, menuText, onClick, activeId}) {
    return (
        <div
            menuId={menuId}
            className={`${style} ${activeId === menuId ? active : ''}`}
            onClick={onItemClick}
        >
            {menuText}
        </div>
    );
};

如果组件需要维护 state 或使用生命周期方法，则优先使用 PureComponent，而不是 Component。Component 的默认行为是不论 state 和 props 是否有变化，都触发 render。而 PureComponent 会先对 state 和 props 进行浅比较，不同的时候才会 render。请看下面的例子：

class Child extends React.Component {
  render() {
    console.log('render Child');
    return (
      <div>
        {this.props.obj.num}
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    obj: { num: 1 }
  };

  onClick = () => {
    const {obj} = this.state;
    this.setState({obj});
  }

  render() {
    console.log('render Parent');
    return (
      <div className="App" >
        <button onClick={this.onClick}>
          点我
        </button>
        <Child obj={this.state.obj}/>
      </div>
    );
  }
}

点击按钮后，Parent 和 Child 的 render 都会触发。如果将 Child 改为 PureComponent，则 Child 的 render 不会触发，因为 props 还是同一个对象。如果将 Parent 也改为 PureComponent，则 Parent 的 render 也不会触发了，因为 state 还是同一个对象