响应钩子和响应生命周期方法

Question

我不熟悉反应和反应本土化。当我开始学习基础知识时，我发现了有关react钩子和react生命周期方法的各种信息。我知道在反应16.3之前有7种生命周期方法，但现在只有6种。有人能详细说明这个生命周期方法并用一些例子对钩子做出反应吗？这可能有助于我更快地学习。谢谢

Answer 1

在React类中，您有生命周期函数和状态来执行任务，但是功能组件中没有它们。React提出了钩子，您可以通过在自定义钩子中捆绑某些功能来简化代码并更好地重用代码。以前，这在类组件中是不可能的。即使与Vue中使用的混合api一样，它们现在也有类似于钩子的组合api。

假设您希望拥有计数器功能，当计数器更改时，它将进行日志记录，并具有一个上下函数和一个计数器值。

在类中，您需要维护使用this.up和this.down更改的this.up，这样就可以在扩展React.Component或React.PureComponent的计数器类中实现它，并且有一个使用计数器扩展计数器的组件，但是该组件仍然可以只有一个计数器。在钩子中，您可以使用自定义钩子实现计数器，并且在一个组件中有多个计数器。

​

const {
  useState,
  useEffect,
  useCallback,
  useRef,
  memo,
} = React;

//hooks, also custom hooks always start with "use"
const useCounter = (name, initialValue = 1) => {
  //local counter value and function to change it
  const [counter, setCounter] = useState(initialValue);
  //ref created on mount with previous counter value
  const countRef = useRef(initialValue);
  //up and down functions created with useCallback so they
  //  will be created on mount and never change
  const up = useCallback(
    () => setCounter((c) => c + 1),
    []
  );
  const down = useCallback(
    () => setCounter((c) => c - 1),
    []
  );
  //effect that will log when counter changes
  useEffect(() => {
    if (countRef.current !== counter) {
      console.log(`counter ${name} changed to`, counter);
      countRef.current = counter;
    }
  }, [counter, name]);
  //return up, down and counter
  return { up, down, counter };
};
//using memo makes UP2 a pure component so it'll not re
//  render since up is created with useCallback and is
//  not re created therefore the props passed to UP2 
//  don't change
const UP2 = memo(function UP2({ up, name }) {
  console.log(`UP2 for ${name} will only render once`);
  return (
    <button
      onClick={() => {
        //state updates are batched in synchronous
        //  event handlers so "chaged to" will log
        //  only once
        up();
        up();
      }}
    >
      +2
    </button>
  );
});

const App = () => {
  //first counter
  const {
    up: up1,
    down: down1,
    counter: counter1,
  } = useCounter('counter one');
  //second counter
  const {
    up: up2,
    down: down2,
    counter: counter2,
  } = useCounter('counter two', 2);
  return (
    <div>
      <div>
        <button onClick={up1}>UP</button>
        <button onClick={down1}>Down</button>
        <UP2 up={up1} name={'counter one'} />
        {counter1}
      </div>
      <div>
        <button onClick={up2}>UP</button>
        <button onClick={down2}>Down</button>
        <UP2 up={up2} name={'counter two'} />
        {counter2}
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

​