Question

据我所知，componentWillMount唯一可以做而constructor无法做到的就是致电setState。

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

由于我们尚未调用render，setState中的componentWillMount将在我们输入第一个render()传递之前准备状态对象。这与constructor的作用基本相同：

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

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

让我们考虑异步的东西：

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

此处我们无法使用constructor，因为[{1}}的作业不会触发this.state。

render()中setState怎么样？根据{{3}}：

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

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

问题1：这是否意味着，在render(内，如果我们在异步方法的回调中调用componentWillMount（可以是一个承诺回调），React 阻止初始渲染，直到执行回调？

在客户端上进行此设置（是的，我在服务器端呈现中看到了这个用例），如果我认为上述情况属实，那么在异步方法完成之前我不会看到任何内容。

我错过了任何概念吗？

问题2：我是否可以使用setState但不使用componentWillMount和constructor来实现其他任何用例？

Answer 1

这是否意味着，在componentWillMount中，如果我们在一个中调用setState 异步方法的回调（可以是一个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中有副作用修改另一个组件中的状态，则反应会发出警告，因为它假设setState本身constructor并且可能在{{1}期间被调用。因此，render()中没有副作用。

如果您在constructor中执行此操作，则情况并非如此，不会引发任何错误。另一方面，来自facebook的人也会在componentWillMount中阻止副作用。因此，如果您没有副作用，可以使用componentWillMount代替constructor。对于副作用，建议使用componentWillMount代替componentDidMount。无论哪种方式，您都不需要componentWillMount。

构造函数与componentWillMount; componentWillMount可以做什么，构造函数不能做什么？

1 个答案: