React 函数组件和类组件

React 组件分两种：

1. 继承 React.Component 的类组件
2. 无状态函数组件

类组件举例：

class AddOption extends React.Component {
  constructor(props) {
    super(props);
    this.handleAddOption = this.handleAddOption.bind(this);
    this.state = {
      error: undefined,
    };
  }
  handleAddOption(e) {
    e.preventDefault();
    const option = e.target.elements.option.value.trim();
    const error = this.props.handleAddOption(option);
    this.setState(() => {
      return { error };
    });
  }
  render() {
    return (
      <div>
        {this.state.error && <p>{this.state.error}</p>}
        <form onSubmit={this.handleAddOption}>
          <input type="text" name="option" />
          <button>AddOption</button>
        </form>
      </div>
    );
  }
}

函数组件没有render()。 函数组件举例：

const Action = (props) => {
  return (
    <div>
      <button onClick={props.handlePick} disabled={!props.hasOptions}>
        What should I do?
      </button>
    </div>
  );
};

两种组件都有各自适用的场合，并非一种比另一种好。

函数组件的特点：

1. 是一个react组件
2. 无state
3. 是一个函数

函数组件的优势：

1. 比基于类的组件快，因为开销小，所以要尽可能使用函数组件。如果一个组件只有一个 render() 函数，基本都可以改成函数组件。
2. 函数组件读写都更容易。
3. 测试起来远比基于类的组件测试容易。