使React useEffect挂钩不在初始渲染上运行

  • Z时代
  • 2024-01-10
  • 分类：问答

根据文档：

componentDidUpdate()更新发生后立即调用。初始渲染不调用此方法。

我们可以使用新的useEffect()钩子来模拟componentDidUpdate()，但似乎useEffect()在每次渲染后都被运行，即使是第一次也是如此。如何使它不在初始渲染上运行？

如您在下面的示例中看到的那样，它componentDidUpdateFunction是在初始渲染期间打印的，但componentDidUpdateClass在初始渲染期间没有打印的。

function ComponentDidUpdateFunction() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log("componentDidUpdateFunction");
  });
  return (
    <div>
      <p>componentDidUpdateFunction: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}
class ComponentDidUpdateClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  componentDidUpdate() {
    console.log("componentDidUpdateClass");
  }
render() {
    return (
      <div>
        <p>componentDidUpdateClass: {this.state.count} times</p>
        <button
          onClick={() => {
            this.setState({ count: this.state.count + 1 });
          }}
        >
          Click Me
        </button>
      </div>
    );
  }
}
ReactDOM.render(
  <div>
    <ComponentDidUpdateFunction />
    <ComponentDidUpdateClass />
  </div>,
  document.querySelector("#app")
);
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>

回答：

我们可以使用该useRef钩子来存储我们喜欢的任何可变值，因此我们可以使用它来跟踪useEffect函数是否是第一次运行。

如果我们希望效果在与该效果相同的阶段中运行componentDidUpdate，则可以使用useLayoutEffect。

const { useState, useRef, useLayoutEffect } = React;
function ComponentDidUpdateFunction() {
  const [count, setCount] = useState(0);
  const firstUpdate = useRef(true);
  useLayoutEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }
    console.log("componentDidUpdateFunction");
  });
  return (
    <div>
      <p>componentDidUpdateFunction: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}
ReactDOM.render(
  <ComponentDidUpdateFunction />,
  document.getElementById("app")
);
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>

以上是 使React useEffect挂钩不在初始渲染上运行 的全部内容， 来源链接： utcz.com/qa/425016.html

回到顶部