javascript - 在React.js中拥有诸如componentWillMount之类的功能的目的是什么？

我最近一直在React.js中编写组件。我从来没有使用过像componentWillMount和componentDidMount这样的方法。
render是必不可少的。我编写的getInitialState和其他辅助方法也很方便。但不是上述两种生命周期方法。

我目前的猜测是它们用于调试吗？我可以在其中进行console.log注销:

componentWillMount: function() {
  console.log('component currently mounting');
},

componentDidMount: function() {
  console.log('component has mounted');
}

还有其他用途吗？

最佳答案

如果要使用某些非响应式(Reactive)JavaScript插件，componentDidMount很有用。例如，React中缺少好的日期选择器。 Pickaday很漂亮，开箱即用。因此，我的DateRangeInput组件现在使用Pickaday作为开始和结束日期的输入，我将其连接起来如下:

  componentDidMount: function() {
    new Pikaday({
      field: React.findDOMNode(this.refs.start),
      format: 'MM/DD/YYYY',
      onSelect: this.onChangeStart
    });

    new Pikaday({
      field: React.findDOMNode(this.refs.end),
      format: 'MM/DD/YYYY',
      onSelect: this.onChangeEnd
    });
  },

需要渲染DOM，以便Pikaday能够连接到它，而componentDidMount钩子(Hook)则使您能够钩住该确切事件。

想要在挂载组件之前以编程方式执行某些操作时，componentWillMount很有用。我正在处理的一个代码库中的一个示例是mixin，其中具有一堆代码，否则这些代码将在许多不同的菜单组件中重复。 componentWillMount用于设置一个特定共享属性的状态。可以使用componentWillMount的另一种方式是通过prop设置组件分支的行为:

  componentWillMount() {
    let mode;
    if (this.props.age > 70) {
      mode = 'old';
    } else if (this.props.age < 18) {
      mode = 'young';
    } else {
      mode = 'middle';
    }
    this.setState({ mode });
  }