Javascript React 中不推荐使用 componentWillUpdate，我该如何替换它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51644862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
componentWillUpdate is deprecated in React, how can I replace it?
提问by Alfrex92
React 16.3.0 was released and there were changes in React lifecycles.
React 16.3.0 发布，React 生命周期发生了变化。
React does not recommend to use componentWillMount, componentWillReceiveProps, componentWillUpdate.
React 不建议使用componentWillMount, componentWillReceiveProps, componentWillUpdate。
In that case, what should I use instead of componentWillUpdate?
For example, in the following code how can I replace componentWillUpdate?
在这种情况下，我应该使用什么来代替componentWillUpdate？例如，在以下代码中，如何替换componentWillUpdate?
import React from "react";
import Modal from "./Modal";
class ModalContainer extends React.Component {
state = {
openModal: false
};
onClick = () => {
this.setState({
openModal: !this.state.openModal
});
};
escapeKey = e => {
if (e.key === "Escape" && this.state.openModal === true) {
this.setState({
openModal: !this.state.openModal
});
}
};
componentDidMount() {
document.body.classList.add("no-scroll");
this.componentWillUpdate(this.state, this.state);
}
componentWillUpdate(p, c) {
if (c.openModal) {
window.addEventListener("keyup", this.escapeKey);
} else {
window.removeEventListener("keyup", this.escapeKey);
}
}
componentWillUnmount() {
window.removeEventListener("keyup", this.escapeKey);
}
render(props) {
return (
<div className="ModalContainer">
<a className={`ModalContainer-trigger`} onClick={this.onClick}>
click here to open the modal
</a>
{this.state.openModal && (
<Modal
onClick={this.onClick}
in={!!this.state.openModal}
{...this.props}
/>
)}{" "}
</div>
);
}
}
export default ModalContainer;
Thank you
谢谢
回答by b.ben
Take a look at getSnapshotBeforeUpdate
看一眼 getSnapshotBeforeUpdate
https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate
https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate
getSnapshotBeforeUpdate() is invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed.
getSnapshotBeforeUpdate() 在最近渲染的输出提交到例如 DOM 之前被调用。它使您的组件能够在可能更改之前从 DOM 中捕获一些信息（例如滚动位置）。
Btw, I think there's not much use case to use such method.
顺便说一句，我认为使用这种方法的用例并不多。
You can still use componentDidUpdateif you want to have side effects after any states changed.
componentDidUpdate如果您想在任何状态更改后产生副作用，您仍然可以使用。
This answer based on React16.6.3
这个答案基于 React16.6.3
回答by Levi Roberts
I had this exact question and luckily Google led me to an articlethat provided the answer.
我有这个确切的问题，幸运的是谷歌让我找到了一篇提供答案的文章。
The easiest solution is to move your LayoutAnimationinto the componentDidUpdateevent.
最简单的解决方案是将您LayoutAnimation的componentDidUpdate活动转移到活动中。
Example:
例子：
componentDidUpdate() {
LayoutAnimation.easeOut()
}
According to the above article, there was a tweet from Andrew Clark, a core contributor to React that the above event is
根据上面的文章，React 的核心贡献者 Andrew Clark 发了一条推文说上述事件是
called before the UI is painted
在绘制 UI 之前调用
and finally:
最后：
This means you can trigger a LayoutAnimation in componentDidUpdate(), and it will still apply to that same update when it finally gets painted to the screen.
这意味着您可以在 componentDidUpdate() 中触发 LayoutAnimation，并且当它最终被绘制到屏幕上时，它仍将应用于相同的更新。
回答by luky
I replaced it with shouldComponentUpdatebecause that is triggered before render()method is called just like with componentWillUpdate.
我将它替换为，shouldComponentUpdate因为它是在render()调用方法之前触发的，就像 with 一样componentWillUpdate。
回答by Sharath Vadlamannati
It's not a big problem, everything will still work, but those methods will probably be removed in React 17. Deprecated doesn't mean it doesn't work, it just means there is a better replacement for it. If you use them while developing your app, you can use the new lifecycle methods described in the blog post below.
这不是一个大问题，一切仍然有效，但这些方法可能会在 React 17 中删除。不推荐使用并不意味着它不起作用，它只是意味着有更好的替代品。如果您在开发应用程序时使用它们，则可以使用下面博客文章中描述的新生命周期方法。
Everything is detailed here on the official React blog in THIS POST BELOW enter link description here
一切都在下面这篇文章的官方 React 博客上有详细 说明 在此处输入链接描述
