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

Question

根据文档：

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>

Answer 1

我们可以使用该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>