javascript - React.js 中使用像 componentWillMount 这样的函数的目的是什么？

Question

我最近一直在用 React.js 编写组件。我从来没有使用过像 componentWillMount 和 componentDidMount 这样的方法。

render是不可或缺的。 getInitialState 和我编写的其他辅助方法也派上用场。但不是前面提到的两种生命周期方法。

我目前的猜测是它们是用于调试的？我可以在其中console.log出:

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

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

还有其他用途吗？

Answer 1

如果您想使用一些非 React 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 可让您 Hook 到该确切事件。

当您想在组件安装之前以编程方式执行某些操作时，

componentWillMount 非常有用。我正在开发的一个代码库中的一个例子是一个 mixin，它有一堆代码，否则这些代码将在许多不同的菜单组件中重复。 componentWillMount 用于设置一个特定共享属性的状态。另一种使用 componentWillMount 的方法是通过 prop(s) 设置组件分支的行为:

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