React Hooks Componentdidmount在 React 中用 hooks 替换生命周期

如果你曾经使用过 React，那么你应该对 React 生命周期的强大功能并不陌生。即将推出的 React Hooks 即将改变我们处理生命周期的方式。

React Hooks 是对现有功能（包括状态和生命周期）的统一。在本文中，我将向您展示如何将生命周期类方法转换为 React Hooks，以进一步阐明 React Hooks 的精髓。

对于三种最常见的生命周期方法（componentDidMount、componentDidUpdate、componentWillUnmount），我将演示一个类样式实现和一个钩子样式实现，然后进行解释。

组件挂载

class Example extends React.Component {
  componentDidMount() {
    console.log('I am mounted!');
  }
  render() {
    return null;
  }
}

function Example() {
  useEffect(() => console.log('mounted'), []);
  return null;
}

useEffect是一个 React hook，你可以在其中应用副作用，例如从服务器获取数据。

第一个参数是一个回调函数，它会在浏览器布局和绘制后触发。因此它不会阻塞浏览器的绘制过程。

第二个参数是一个值数组（通常是 props）。

componentDidMount() {
  console.log('mounted or updated');
}

componentDidUpdate() {
  console.log('mounted or updated');
}

useEffect(() => console.log('mounted or updated'));

在 hooks 中，没有直接的实现来替代 componentDidUpdate。该useEffect函数可用于在组件每次渲染后（包括组件挂载和组件更新后）触发回调。

然而这不是一个大问题，因为大多数时候我们将类似的功能放在componentDidMount和componentDidUpdate中。

仅模仿 componentDidUpdate 可以作为另一篇文章的讨论。

componentWillUnmount() {
  console.log('will unmount');
}

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

当您在传递给的回调中返回一个函数时useEffect，返回的函数将在组件从 UI 中移除之前被调用。

正如我们之前讨论过的，我们需要传递一个空列表作为第二个参数，useEffect这样回调函数只会被调用一次。这也适用于返回的函数。

通常我们会在 componentWillUnmount 中进行清理。假设你想在 componentDidMount 上创建一个事件监听器，并在 componentDidUnmount 上进行清理。使用 hooks 后，这些代码将被合并到一个回调函数中。

我们可以为不同的副作用创建多个 hooks 并重用它们。将相关代码分组并使状态管理可重用是 React hooks 的主要目的之一。

现在我们可以将 componentDidMount、componentDidUpdate 和 componentWillUnmount 转换为 React hooks，太棒了！

别急，这里有一个问题：两种风格的效果并不完全相同。

与 componentDidMount 和 componentDidUpdate 不同，传递给 useEffect 的函数在布局和绘制之后，延迟事件期间触发。

通常情况下这不会有问题。但是如果你想在 effect 中操作 DOM，并确保它在浏览器绘制之前发生，则需要使用useLayoutEffect。语法与相同useEffect。

总而言之，我们可以使用useEffect钩子来替代生命周期方法，但它们并不完全相同。使用它们时，请尝试以钩子的方式思考！