在React中不建议使用componentWillUpdate，我该如何替换它？

Question

React 16.3.0已发布，并且React生命周期有所变化。

反应不推荐使用componentWillMount，componentWillReceiveProps，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;

谢谢

Answer 1

看一眼 getSnapshotBeforeUpdate

https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate

getSnapshotBeforeUpdate() 在最近渲染的输出提交到例如 DOM 之前被调用。它使您的组件能够在可能更改之前从 DOM 中捕获一些信息（例如滚动位置）。

顺便说一句，我认为使用这种方法的用例并不多。

componentDidUpdate如果您想在任何状态更改后产生副作用，您仍然可以使用。

这个答案基于 React16.6.3

Answer 2

这不是一个大问题，一切仍然有效，但这些方法可能会在 React 17 中被删除。弃用并不意味着它不起作用，它只是意味着有更好的替代品。如果您在开发应用程序时使用它们，则可以使用下面博客文章中描述的新生命周期方法。

所有内容均在官方 React 博客上的这篇文章中详细介绍， 在此处输入链接描述