反应挂钩和组件生命周期当量

Question

使用React钩子（如use效应）的组件DIDMount、组件DADUpdate和组件WillUnMount生命周期钩子的等价物是什么？

Answer 1

为了简单的解释，我想展示一个视觉参考

正如我们在上图中所看到的那样-

组件安装：

useEffect(() => {        
   console.log('componentWillMount');
}, []);

组件更新：

useEffect(() => {        
   console.log('componentWillUpdate- runs on every update');
});

useEffect(() => {        
   console.log('componentWillUpdate - runs if dependency value changes ');
},[Dependencies]);

组件将卸载：

  useEffect(() => {
    return () => {
        console.log('componentWillUnmount');
    };
   }, []);

Answer 2

来自React文档：

如果您熟悉React类生命周期方法，可以将useEffect钩子看作componentDidMount、componentDidUpdate和componentWillUnmount的组合。

他们的意思是：

componentDidMount有点像useffect（回调，[]）

componentDidUpdate有点像useEffect（回调，[dep1，dep2，…） -DEP数组告诉React：“如果其中一个DEP发生更改，请在呈现后运行回调”。

componentDidMount componentDidUpdate有点像useffect（回调）

从回调返回的函数的排序：

useEffect(() => { 
    /* some code */
    return () => { 
      /* some code to run when rerender or unmount */
    }
)

借助Dan Abramov博客中的措辞，以及我自己的一些补充：

虽然你可以使用这些钩子，但它并不是完全等价的。与componentDidMount和componentdiddupdate不同，它将捕获道具和状态。因此，即使在回调中，您也会看到特定渲染的道具和状态（这意味着在componentDidMount中是初始道具和状态）。如果你想看到“最新”的东西，你可以把它写到一个ref中。但是通常有一种更简单的方法来构造代码，这样你就不必这样做了。返回的函数被认为是componentWillUnmount的替代函数，它也不是完全等效的函数，因为每次组件重新呈现时以及组件卸载时，该函数都会运行。请记住，效果的心智模型不同于组件生命周期，试图找到它们的精确等价物可能会让您感到困惑而不是帮助。为了提高效率，您需要“考虑效果”，他们的心智模型更接近于实现同步，而不是响应生命周期事件。

Dan博客中的示例：

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      console.log(`You clicked ${count} times`);
    }, 3000);
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

如果我们使用类实现：

componentDidUpdate() {
  setTimeout(() => {
    console.log(`You clicked ${this.state.count} times`);
  }, 3000);
}

这个。状态计数始终指向最近的计数，而不是属于特定渲染的计数。

Answer 3

将空数组作为第二个参数传递给useffect（），以便仅在装载时运行回调。

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>