内容 - React 最佳实践 - 《Web 前端洞见》

无状态和refs的组件不要用 Class 组件
使用组合而非继承
尽量不要用 Mixins
多个组件共享数据的处理
组件一定要写 propTypes
传递属性，筛选出不必要的属性
组件中的方法用箭头
组件挂载时在 componentDidMount 中接口
推荐阅读

无状态和refs的组件不要用 Class 组件

用无状态函数组件(SFC)。无状态函数组件和 Class 相比：

写法简洁。
无状态组件占用更少的内存。

使用组合而非继承

组合和继承相比，提供了清晰而安全地定制组件外观和行为的灵活方式。

详细说明：这里。

尽量不要用 Mixins

Mixins 会增加隐式的依赖，导致命名冲突，并且会以雪球式增加复杂度。在大多数情况下Mixins可以被更好的方法替代，如：组件化，高阶组件，工具模块等。

不要用 Mixins 的详细说明：Mixins Considered Harmful。

多个组件共享数据的处理

用 Context API。或状态提升。

状态提升指：将多个组件的共享数据提升至这些组件的最近共同父组件中。详细的实现方式见这里。

组件一定要写 propTypes

通过 propTypes 更容易理解组件，也容易debug。

用 ts 来写 propTypes 会更舒服。还嗯控制

传递属性，筛选出不必要的属性

// relevantProps 是必要的属性
const { irrelevantProp1, irrelevantProp2, ...relevantProps  } = this.props;
<WrappedComponent {...relevantProps} />

组件中的方法用箭头

组件中的方法用箭头，将实例的绑定到方法。避免写 bind this。

handleClick = () => {
  console.log('this is:', this);
},
render() {
  return (
    <button onClick={this.handleClick}>
      Click me
    </button>
  );
}

bind this 的版本:

constructor(props) {
  super(props)
  this.handleClick = this.handleClick.bind(this)
}
handleClick() {
  console.log('this is:', this);
},
render() {
  return (
    <button onClick={this.handleClick}>
      Click me
    </button>
  );
}

或者事件回调里用箭头函数

handleClick() {
  console.log('this is:', this);
},
render() {
  return (
    <button 
      onClick={() => {
        this.handleClick()
      }}>
      Click me
    </button>
  );
}

组件挂载时在 componentDidMount 中接口

在 componentDidMount 中执行服务器通信可以保证获取到数据时，组件已经处于挂载状态，这时即使要直接操作DOM也是安全的。

不在 componentWillMount 中的原因

componentWillMount 无法保证 DOM 加载好了。操作 DOM 会报错。
当组件在服务器端渲染时，componentWillMount会被调用两次，一次是在服务器端，另一次是在浏览器端，而componentDidMount能保证在任何情况下只会被调用一次，从而不会发送多余的数据请求。

不在 constructor 中的原因：构造函数的意义是执行组件的初始化工作，如设置组件的初始状态，并不适合做数据请求这类有“副作用”的工作。因此，不推荐在构造函数中执行服务器通信。

React 最佳实践