Question

1.1 设计原则

• 保持接口小， props 数量要少
• 根据数据边界来划分组件，充分利用组合
• 把 state 往上层组件提取，让下层组件只需要实现为纯函数

1.2 组件划分

任何一个复杂组件都是从简单组件开始的，一开始我们在 render 函数里写的代码不多，但是随着逻辑的复杂，JSX 代码越来越多，于是，就需要拆分函数中的内容

• 在 React 中，有一个误区，就是把 render 中的代码分拆到多个 renderXXXX 函数中去，比如下面这样

class StopWatch extends React.Component {
  render() {
  const majorClock = this.renderMajorClock();
  const controlButtons = this.renderControlButtons();
  const splitTimes = this.renderSplitTimes();
  
  return (
     <div>
      {majorClock}
      {controlButtons}
      {splitTimes}
     </div>
  );
  }
  
  renderMajorClock() {
   //TODO: 返回数字时钟的 JSX
  }
  
  renderControlButtons() {
   //TODO: 返回两个按钮的 JSX
  }
  
  renderSplitTimes() {
   //TODO: 返回所有计次时间的 JSX
  }
}

用上面的方法组织代码，当然比写一个巨大的 render 函数要强，但是，实现这么多 renderXXXX 函数并不是一个明智之举，因为这些 renderXXXX 函数访问的是同样的 props 和 state，这样代码依然耦合在了一起。更好的方法，是把这些 renderXXXX 重构成各自独立的 React 组件，像下面这样

class StopWatch extends React.Component {
  render() {
  return (
     <div>
      <MajorClock>
      <ControlButtons>
      <SplitTimes>
     </div>
  );
  }
}

const MajorClock = (props) => {
  //TODO: 返回数字时钟的 JSX
};

const ControlButtons = (props) => {
  //TODO: 返回两个按钮的 JSX
};
  
const SplitTimes = (props) => {
  //TODO: 返回所有计次时间的 JSX
}

我们创造了 MajorClock 、 ControlButtons 和 SplitTimes 这三个组件，目前，我们并不知道它们是否应该有自己的 state ，但是从简单开始，首先假设它们没有自己的 state ，定义为函数形式的无状态组件

组件 props 的设计

使用 propTypes 来定义组件的 props

const ControlButtons = (props) => {
  //TODO: 返回两个按钮的 JSX
};

ControlButtons.propTypes = {
  activated: PropTypes.bool,
  onStart: PropTypes.func.isRquired,
  onPause: PropTypes.func.isRquired,
  onSplit: PropTypes.func.isRquired,
  onReset: PropTypes.func.isRquired,
  splits: PropTypes.arrayOf(PropTypes.number)
};

1.3 组件内部实现

• 尽量每个组件都有自己专属的源代码文件
• 用解构赋值（destructuring assignment）的方法获取参数 props 的每个属性值
• 利用属性初始化（property initializer）来定义 state 和成员函数

属性初始化方法

尽量不要在 JSX 中写内联函数（inline function），比如这样写，是很不恰当的

<ControlButtons
  activated={this.state.isStarted}
  onStart={() => { /* TODO */}}
  onPause={() => { /* TODO */}}
  onReset={() => { /* TODO */}}
  onSplit={() => { /* TODO */}}
/>

当然，按照上面那种写法，也可以完成程序的功能，但是，会带来性能的代价。首先，每一次渲染这段 JSX ，都会产生全新的函数对象，这是一种浪费；其次，因为每一次传给 ControlButtons 的都是新的 props ，这样 ControlButtons 也无法通过 shouldComponentUpdate 对 props 的检查来避免重复渲染