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可能发生更改之前从DOM中捕获一些信息（例如，滚动位置）。

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

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

此答案基于React16.6.3

Answer 2

我有一个确切的问题，幸运的是Google引导我找到了article，提供了答案。

最简单的解决方案是将LayoutAnimation移到componentDidUpdate事件中。

示例：

componentDidUpdate() {
  LayoutAnimation.easeOut()
}

根据以上文章，React的核心撰稿人安德鲁·克拉克（Andrew Clark）发了一条推文，上面的事件是

在绘制用户界面之前调用

最后：

这意味着您可以在componentDidUpdate（）中触发LayoutAnimation，当它最终被绘制到屏幕上时，它仍将应用于同一更新。

Answer 3

getSnapshotBeforeUpdate可以代替componentWillUpdate使用。但是，如果您仍然想使用相同的方法，请添加UNSAFE_

方法之前

UNSAFE_componentWillUpdate（）

注意：不建议使用UNSAFE_componentWillUpdate。最好的选择是comoponentDidUpdate

更多信息： https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate

Answer 4

您可以尝试 shouldComponentUpdate（），但需要小心

Answer 5

我将其替换为shouldComponentUpdate，因为它是在调用render()方法之前触发的，就像componentWillUpdate一样。

Answer 6

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

此处的所有详细信息都在官方的React博客中 enter link description here

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

6 个答案: