构造函数与组件WillMount； componentWillMount 能做什么而构造函数不能？

Question

据我所知，componentWillMount 唯一能做而constructor 不能做的就是打电话给setState。

componentWillMount() {
    setState({ isLoaded: false });
}

由于我们还没有调用render，componentWillMount 中的setState 将在我们进入第一个render() 传递之前准备状态对象。这与constructor 所做的基本相同：

constructor(props) {
    super(props);
    this.state = { isLoaded: false };
}

---

但我看到另一个用例componentWillMount 很有用（在服务器端）。

让我们考虑一些异步的东西：

componentWillMount() {
    myAsyncMethod(params, (result) => {
        this.setState({ data: result });
    })
}

这里我们不能使用constructor 作为对this.state 的赋值不会触发render()。

componentWillMount 中的setState 怎么样？根据React docs：

componentWillMount() 在安装发生之前立即调用。它 在render() 之前调用，因此在此方法中设置状态将 不会触发重新渲染。避免引入任何副作用或 此方法中的订阅。

所以，在这里我认为 React 将使用新的状态值进行第一次渲染并避免重新渲染。

问题 1：这是否意味着，在 componentWillMount 内部，如果我们在异步方法的回调（可以是 Promise 回调）中调用 setState，React 会阻止初始渲染 直到回调被执行？

在客户端上进行此设置（是的，我在服务器端渲染中看到了该用例），如果我假设上述情况属实，那么在我的异步方法完成之前我将看不到任何东西。

我是否遗漏了任何概念？

问题 2：我可以仅使用 componentWillMount 而不是使用 constructor 和 componentDidMount 实现的任何其他用例吗？

Answer 1

这是否意味着，在 componentWillMount 内部，如果我们在一个 async 方法的回调（可以是 promise 回调），React 块 执行回调之前的初始渲染？

不，请参阅here。

以下代码不会阻止渲染（请记住，无论如何调用 setState 都是一种反模式）

componentWillMount: function() {
     new Promise((resolve, reject) => {
        setTimeout(()=> {
            resolve();
        }, 2000)
     }).then(() => this.setState({ promiseResult: 'World' }));
  },

问题 2：我可以使用哪些其他用例来实现 仅 componentWillMount，但不使用构造函数和 componentDidMount?

不，对于 ES6 类，您可以丢弃 componentWillMount。只有使用React.createClass({... })时才需要

编辑：显然，我错了。感谢@Swapnil 指出这一点。这是discussion。

如果constructor 中存在修改另一个组件中的状态的副作用，React 会抛出警告，因为它假定constructor 本身中的setState 可能在render() 期间被调用。因此，constructor 没有副作用。

如果您在componentWillMount 中执行此操作，则不会出现任何错误。另一方面，来自 facebook 的人也反对 componentWillMount 中的副作用。因此，如果您没有任何副作用，您可以使用constructor 而不是componentWillMount。对于副作用，建议使用componentDidMount 而不是componentWillMount。 无论哪种方式，您都不需要componentWillMount。