应该何时将反应组件声明为函数，而不是类？

Question

我不确定何时将反应组件声明为简单的独立函数，而不是常规class myComponent extends Component语法。 要使用React的文档（位于此处 ）中的示例：

以下称为“组件”

function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>The water would boil.</p>;
  }
  return <p>The water would not boil.</p>;
}

虽然它似乎只是一个函数，并被声明为任何常规的旧函数。 然后在下一段中，以下内容也被定义为组件，看起来更像我认为组件应该看起来的样子：

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  handleChange(e) {
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    return (
      <fieldset>
        <legend>Enter temperature in Celsius:</legend>
        <input
          value={temperature}
          onChange={this.handleChange} />
        <BoilingVerdict
          celsius={parseFloat(temperature)} />
      </fieldset>
    );
  }
}

这两个“组件”有什么区别？ 如果第一个示例不是从Component类继承而且没有使用React.createClass创建， React.createClass第一个示例实际上是一个组件吗？ 我很感激有人解释这种区别，因为我无法在文档的任何地方找到答案。

Answer 1

如果不需要使用生命周期方法且组件不具有状态，则可以将组件声明为函数。 如果组件是扩展Component的类，则只能使用componentWillMount()和componentDidMount()等组件生命周期方法。

Answer 2

Calculator必须指定为基于类的组件，因为它依赖于内部组件状态，即this.setState({...}) 。 功能组件（也称为无状态组件） 没有后备实例 ，因此它们无法以相同方式维护本地状态。

就个人而言，我总是尝试编写功能组件，因为它们更容易测试，因为它们具有使用道具和返回ReactElement实例树的ReactElement 。 我只会将组件转换为基于类的组件，如果它将：

• 需要管理自己的基于表示的状态，即不适用于整个应用程序的状态
• 从生命周期方法中受益，作为通过限制重新呈现来提高性能的手段
• 需要通过refs引用子ReactElement或DOM节点

Answer 3

Facebook有两个互补的文档很好地解释了这一点：

https://facebook.github.io/react/docs/components-and-props.html https://facebook.github.io/react/docs/state-and-lifecycle.html

TL; DR“组件”主要负责表示某些DOM。 根据应用程序的组织方式，组件可能需要也可能不需要维护自己的状态，也无需访问componentDidMount或render等生命周期方法。 如果您确实需要这些功能，那么您的组件应该是一个继承自React.Component的类。 否则，您可能会将组件编写为普通的旧函数。

Answer 4

如果更优选函数方式而不是创建类，则可以使用名为recompose的高阶组件实用程序，它具有生命周期 HOC。

小例子：

const NewComponent = lifecycle({
      componentWillMount() {
        this.props.onEnterScreen();
      },
})(Component)