React Hook和等效组件生命周期

Question

什么是的等同
componentDidMount，componentDidUpdate和componentWillUnmount使用生命周期的钩子钩反应一样useEffect？

Answer 1

componentDidMount

传递一个空数组作为第二个参数，useEffect()以仅在安装时仅运行回调。

function ComponentDidMount() {

  const [count, setCount] = React.useState(0);

  React.useEffect(() => {

    console.log('componentDidMount');

  }, []);



  return (

    <div>

      <p>componentDidMount: {count} times</p>

      <button

        onClick={() => {

          setCount(count + 1);

        }}

      >

        Click Me

      </button>

    </div>

  );

}



ReactDOM.render(

  <div>

    <ComponentDidMount />

  </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>

componentDidUpdate

componentDidUpdate()更新发生后立即调用。初始渲染不调用此方法。useEffect在每个渲染（包括第一个）上运行。因此，如果要使用严格等同于componentDidUpdate，则必须使用useRef确定组件是否已安装一次。如果您想要更严格，请使用useLayoutEffect()，但它会同步触发。在大多数情况下，useEffect()应该足够了。

这个答案受到Tholle的启发，所有功劳归他所有。

function ComponentDidUpdate() {

  const [count, setCount] = React.useState(0);



  const isFirstUpdate = React.useRef(true);

  React.useEffect(() => {

    if (isFirstUpdate.current) {

      isFirstUpdate.current = false;

      return;

    }



    console.log('componentDidUpdate');

  });



  return (

    <div>

      <p>componentDidUpdate: {count} times</p>

      <button

        onClick={() => {

          setCount(count + 1);

        }}

      >

        Click Me

      </button>

    </div>

  );

}



ReactDOM.render(

  <ComponentDidUpdate />,

  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>

componentWillUnmount

在useEffect的callback参数中返回一个回调，它将在卸载之前被调用。

function ComponentWillUnmount() {

  function ComponentWillUnmountInner(props) {

    React.useEffect(() => {

      return () => {

        console.log('componentWillUnmount');

      };

    }, []);



    return (

      <div>

        <p>componentWillUnmount</p>

      </div>

    );

  }



  const [count, setCount] = React.useState(0);



  return (

    <div>

      {count % 2 === 0 ? (

        <ComponentWillUnmountInner count={count} />

      ) : (

        <p>No component</p>

      )}

      <button

        onClick={() => {

          setCount(count + 1);

        }}

      >

        Click Me

      </button>

    </div>

  );

}



ReactDOM.render(

  <div>

    <ComponentWillUnmount />

  </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>