我应该如何替换componentWillMount()? [英] How should I alternate componentWillMount()?
问题描述
我正在使用React.js，并且正如您所知，componentWillMount()将被弃用.
我想替换我的componentWillMount.
I'm using React.js, and as you know, componentWillMount() is going to be deprecated.
I wanna replace my componentWillMounts.
我将把它的逻辑转移到constructor中.在componentWillMount和constructor中执行某些逻辑之间有什么区别?
I'm going to move its logics into constructor. Is there any difference between executing some logic in componentWillMount and in constructor?
例如，
之前
class Hello extends React.Component {
componentWillMount() {
doSomething();
}
render() {
return <div>{this.state.name} </div>
}
}
之后
class Hello extends React.Component {
constructor(props) {
super(props);
doSomething();
}
render() {
return <div>{this.state.name} </div>
}
}
另外，当doSomething为setState时，构造函数和公共属性中的设置状态是否存在差异?
Also, when doSomething is setState, is there any difference setting state in constructor and in public prop?
在构造函数中
constructor(props) {
super(props);
this.state = { foo: 1 };
}
以公共道具
state = { foo: 1 };
推荐答案
constructor不是执行某些操作的正确位置.因为它将完成其他操作，直到完成.
constructor is not the right place for performing some actions. Because it will hold other operations until it's finished.
componentDidMount是正确的选择，因为它是一个异步函数，因此操作可以在后台运行，并且不会妨碍UI呈现.
componentDidMount is the right choice because it's an asynchronous function so that actions are run in the background and there'll be no hamper in the UI rendering.
这是您可以选择的列表何时在constructor和componentDidMount之间使用:
Here's a list that you can choose when to use between constructor and componentDidMount:
执行:
- 初始化状态
- 绑定事件处理程序
如果您不初始化状态并且不绑定方法，则无需实现构造函数.
If you don't initialize a state and you don't bind methods, you don't need to implement the constructor.
不要:
避免引入任何副作用或订阅.不要在构造函数中使用setState()来设置状态.
Avoid introducing any side-effects or subscriptions. Do not set state by using setState() in the constructor.
执行:
- 需要DOM节点的初始化
- 从远程终结点加载数据(实例化网络请求)
- 设置所有订阅(不要忘记在componentWillUnmount()中退订)
您可能也有兴趣阅读react创建者的评论 ，丹·阿布拉莫夫:
You may also be interested to read the comment from the creator of react, Dan Abramov:
我不想等待组件挂载以调度ajax调用来满足组件数据依赖性.我想尽快做到这一点，就像在构造函数中一样，甚至在componentWillMount中也是如此.
如果这是一个异步请求，则无论您在何处触发组件，该组件在安装时都将无法实现.这是因为JS是单线程的，并且网络请求无法返回".并在我们仍在渲染时进行处理.因此，提前触发和延迟触发之间的差异通常可以忽略不计.
If it's an async request, it won't be fulfilled by the time the component mounts anyway, regardless of where you fire it. This is because JS is single threaded, and the network request can't "come back" and be handled while we are still rendering. So the difference between firing it earlier and later is often negligible.
您是正确的，尽管在少数情况下这很重要，但对于那些情况，有可能违反建议.但是您应该格外谨慎，因为状态可以在安装之前进行更新，并且如果您的数据取决于状态，则在这种情况下可能必须重新提取.换句话说:如果有疑问，请在componentDidMount中进行.
You're right that it matters in some rare cases though and for those cases it might make sense to break the recommendation. But you should be extra cautious as state can update before mounting, and if your data depends on state, you might have to refetch in that case. In other words: when in doubt, do it in componentDidMount.
避免在构造函数和Will *生命周期中产生副作用的具体建议与我们正在进行的更改有关，以允许呈现异步和可中断的更改(部分是为了更好地支持此类用例).我们仍在弄清楚它应该如何工作的确切语义，因此目前我们的建议更加保守.随着我们在生产中更多地使用异步渲染，我们将在不牺牲效率或正确性的情况下提供有关在何处触发请求的更具体的指导.但是就目前而言，为异步渲染提供一条清晰的迁移路径(从而在我们的建议中更加保守)更为重要.
The specific recommendation to avoid side effects in the constructor and Will* lifecycles is related to the changes we are making to allow rendering to be asynchronous and interruptible (in part to support use cases like this better). We are still figuring out the exact semantics of how it should work, so at the moment our recommendations are more conservative. As we use async rendering more in production we will provide a more specific guidance as to where to fire the requests without sacrificing either efficiency or correctness. But for now providing a clear migration path to async rendering (and thus being more conservative in our recommendations) is more important.
出于进一步的兴趣，您也可以访问此帖子.
这篇关于我应该如何替换componentWillMount()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
