class AjaxInConstructor extends React.Component {
constructor() {
super();
this.state = { name: '', age: '' };
this.loadData().then(data => {
this.setState(data);
});
}
public loadData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: 'slideshowp2',
age: 123
});
}, 2000);
});
}
public render() {
const { name, age } = this.state;
return (
<div>
<p>Can I init component state async?</p>
<p>name: {name}</p>
<p>age: {age}</p>
</div>
);
}
}
ReactDOM.render(<AjaxInConstructor />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
上面是我的演示代码。我知道人们总是将ajax放在
componentDidMount
或componentWillMount
生命周期中。但是这种情况也可以。
在chrome
console
中,React
不会引发任何错误和警告。那么,我的问题是这样的用法是完全正确的吗?有什么错误吗? 最佳答案
您可以随时随地拨打AJAX电话。在构造函数中进行AJAX调用没有任何“错误”,但是有一个陷阱。您只想在组件安装之后或即将安装之前进行AJAX调用。
因此,在渲染组件之前,建议使用componentDidMount()
或componentWillMount()
进行AJAX调用。仅仅因为React允许做“事情”,并不意味着您应该这样做! :)
更新
我也意识到,最初我的回答并不严格。我一直盲目地跟随着其他程序员所遵循的。
经过一番搜索,我发现它们离完整答案更近了一步-
Why ajax request should be done in componentDidMount in React components?
这些答案的实质是,当您在setState()
中调用componentWillMount()
时,该组件将不会重新呈现。因此,必须使用componentDidMount()
。进一步阅读后,我了解到它已由React团队在后续发行版中修复。您现在可以在setState()
中调用componentWillMount()
。我认为这就是每个人都建议使用didMount
进行AJAX调用的原因。
其中一条评论也非常清楚地提出了我的想法-