在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
    });
  },

需要为Pikaday呈现DOM以连接它，并且componentDidMount钩子允许您挂钩到该确切事件。

如果要在组件安装之前以编程方式执行某些操作， 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 });
  }

Answer 2

componentDidMount仅在客户端运行一次。 这很重要，特别是如果您正在编写同构应用程序（在客户端和服务器上运行）。 您可以使用componentDidMount执行要求您有权访问窗口或DOM的任务。

来自Facebook的React Page

If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.

componentWillMount具有较少的用例（我实际上并没有使用它），但它的不同之处在于它在客户端和服务器端都运行。 您可能不希望在此处放置事件侦听器或DOM操作，因为它将尝试无缘无故地在服务器上运行。

Answer 3

这是使用componentWillMount的同构Web应用程序的示例： https ： //github.com/coodoo/react-redux-isomorphic-example

但是，我99％肯定它在服务器端没有任何理由运行componentWillMount的代码（我认为使用componentDidMount确保它只是运行客户端会更有意义）作为确保获取承诺的代码是在呈现页面之前实现的是在server.js中不在单个组件内部。

这里有关于每个组件异步提取的讨论： https ： //github.com/facebook/react/issues/1739据我所知，就同构性至少而言， componentWillMount没有一个好的用例。

Answer 4

在我的项目中，这是一个仪表板工具，我使用了componentDidMount（）。

在主页上，以前保存的仪表板显示在侧栏上。 我在组件呈现主页的componentDidMount（）中进行ajax调用，以便在呈现页面后异步获取仪表板列表。

Answer 5

为什么反应生命周期方法？

打算将第三方（Ex D3.js）库与React Component一起使用

---

class Example extends React.component{
  constructor(){
    // init state
    // will be called only once
  }  
  componentWillMount(){
    // will be called only once
    // will not be triggered when re-rendering
    // usually will fetch data that is needed in order 
    // to render properly from other API
  }
  shouldComponentUpdate(){
      return false
      // will not re-render itself after componentDidMount(){}
  }
  render(){
    return (
      <div id="chart"></div>
    )
  }
  componentDidMount(){
    d3.select(".chart")
      .selectAll("p")
      // d3.js ........
      // d3.js ........
      // Usually, this will trigger React to re-render itself,
      // but this time will not because we have set 
      // shouldComponentUpdate to false
  }
}

为什么React想要这样做？

由于渲染DOM是一项昂贵的操作，因此React使用虚拟DOM层来仅更新与先前状态不同的DOM / DOM。