React 中不推荐使用 componentWillUpdate,我该如何替换它?

IT技术 javascript reactjs
2021-05-16 15:18:15

React 16.3.0 发布,React 生命周期发生了变化。

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;

谢谢

4个回答

看一眼 getSnapshotBeforeUpdate

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

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

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

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


这个答案基于 React16.6.3

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

在方法之前。

UNSAFE_componentWillUpdate()

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

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

我有这个确切的问题,幸运的是谷歌让我找到了一篇提供答案文章

最简单的解决方案是将您LayoutAnimationcomponentDidUpdate活动转移活动中。

例子:

componentDidUpdate() {
  LayoutAnimation.easeOut()
}

根据上面的文章,React 的核心贡献者 Andrew Clark 发了一条推文说上述事件是

在绘制 UI 之前调用

最后:

这意味着您可以在 componentDidUpdate() 中触发 LayoutAnimation,当它最终被绘制到屏幕上时,它仍将应用于相同的更新。

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