如何使用带有钩子的生命周期方法？

Question

我经过了Reactiv16.7.0中引入的钩子。

https://reactjs.org/docs/hooks-intro.html

因此，我对钩子的理解是，我们可以在函数组件中使用状态，而无需在react中编写类组件。这真是令人惊奇的特征。

但是我不清楚在功能组件中使用钩子的情况。

   import { useState } from 'react';

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

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

如果使用钩子，如何在上述功能组件中使用生命周期方法？

Answer 1

以下是最常见的生命周期的示例：

componentDidMount

将一个空数组作为第二个参数传递给useEffect()，以便只在挂载上运行回调。

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, []); // Pass an empty array to run only callback on mount only.

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

componentDidUpdate (松散)

通过将单个参数传递到useEffect，它将在每次呈现之后运行。这是一个松散的等价物，因为这里有一个细微的区别，即componentDidUpdate不会在第一个呈现之后运行，但是这个钩子版本会在每次呈现之后运行。

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }); // No second argument, so run after every render.

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

componentDidUpdate (严格)

这个示例与上面的示例的不同之处在于，这里的回调不会在初始呈现上运行，严格模仿componentDidUpdate的语义。这个答案是Tholle，所有的功劳都归于他。

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

  const firstUpdate = useRef(true);
  useLayoutEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log('componentDidUpdate');
  });

  return (
    <div>
      <p>componentDidUpdate: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

componentWillUnmount

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

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

  useEffect(() => {
    // Return a callback in useEffect and it will be called before unmounting.
    return () => {
      console.log('componentWillUnmount!');
    };
  }, []);

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

shouldComponentUpdate

您已经可以使用React.PureComponent或React.memo在组件级别上实现这一目标。为了防止子组件的重命名，下面的示例取自反应文档。

function Parent({ a, b }) {
  // Only re-rendered if `a` changes:
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // Only re-rendered if `b` changes:
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

getDerivedStateFromProps

再一次，摘自反应文档

function ScrollView({row}) {
  let [isScrollingDown, setIsScrollingDown] = useState(false);
  let [prevRow, setPrevRow] = useState(null);

  if (row !== prevRow) {
    // Row changed since last render. Update isScrollingDown.
    setIsScrollingDown(prevRow !== null && row > prevRow);
    setPrevRow(row);
  }

  return `Scrolling down: ${isScrollingDown}`;
}

getSnapshotBeforeUpdate

钩还没有等价物。

componentDidCatch

钩还没有等价物。

Answer 2

你真的没有生命周期方法。)，但是您可以使用效果钩子，如下面所示，https://reactjs.org/docs/hooks-effect.html

效果钩子将能够复制componentDidMount、componentDidUpdate和componentWillUnmount的行为。

因此，您真的不需要组件中的生命周期方法。效果挂钩正在取代他们的位置。=)

阅读上面的链接，您将得到一些关于它们是如何工作的例子。

Answer 3

React团队为此提供了一个useEffect钩子。让我们以示例中的组件为例，并为计数添加服务器上传，否则我们会将其放入例如componentDidUpdate

 import { useState, useEffect } from 'react';

 function Example() {
   const [count, setCount] = useState(0);
   useEffect(() => {
     fetch(
       'server/url',
       {
         headers: {
           'Accept': 'application/json',
           'Content-Type': 'application/json'
         },
         body: JSON.stringify({count}),
       }
     ); 
   });

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

在这个例子中，这看起来并不是一个巨大的胜利，因为事实并非如此。但是生命周期方法的问题是，您只能在组件中获得其中的一个。如果您想要上传到服务器，触发一个事件，并将一条消息放到队列中，而这些事情都没有关系，那该怎么办？太糟糕了，他们都挤在componentDidUpdate里。或者您有n层包装的HOC，用于您想要做的n操作。但是使用钩子，您可以将所有这些分解成对useEffect的解耦调用，而无需不必要的HOC层。