我最近一直在用 React.js 编写组件。我从来没有使用过像componentWillMount和这样的方法componentDidMount。
render是必不可少的。 getInitialState和我写的其他辅助方法也派上用场。但不是上述两种生命周期方法。
我目前的猜测是它们用于调试？我可以在它们里面 console.log out：
componentWillMount: function() {
console.log('component currently mounting');
},
componentDidMount: function() {
console.log('component has mounted');
}
还有其他用途吗？
componentDidMount如果你想使用一些非 React JavaScript 插件，这很有用。例如，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 });
}
componentDidMount只在客户端运行一次。这很重要，特别是如果您正在编写同构应用程序（在客户端和服务器上运行）。您可以使用 componentDidMount 来执行需要访问窗口或 DOM 的任务。
来自 Facebook 的 React 页面
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 操作，因为它会无缘无故地尝试在服务器上运行。
这是一个使用同构 Web 应用程序的示例componentWillMount：https : //github.com/coodoo/react-redux-isomorphic-example
但是，我 99% 肯定它componentWillMount在服务器端无缘无故地运行内部代码（我认为使用componentDidMount确保它只在客户端运行会更有意义），因为确保获取Promise之前得到履行的代码呈现页面是在 server.js 中而不是在单个组件中。
这里有关于每个组件异步获取的讨论：https : //github.com/facebook/react/issues/1739据我所知，componentWillMount至少就同构而言，没有一个好的用例。
在我的仪表板工具项目中，我使用了 componentDidMount()。
在主页上以前保存的仪表板出现在侧栏上。我在组件渲染主页的 componentDidMount() 中进行了 ajax 调用，以便在页面渲染后异步获取仪表板列表。