Хуки React соответствуют жизненному циклу и API в ClassComponent.

React.js

useEffectЖизненный цикл, который можно заменить,componentDidMount, componentWillUnMountа такжеcomponentDidUpdate

использоватьuseEffectЗаканчиватьcomponentDidMountЭффект

function AComponent() {
    useEffect(() => {
        // TODO
    }, []);
}

useEffectВторой параметр[], это означает, что этот эффект будет иметь место только вcomponentDidMountа такжеcomponentWillUnMountпри звонке

componentWillUnMountОбратный вызов, возвращаемый первым параметром, называется

использоватьuseEffectЗаканчиватьcomponentDidUpdateЭффект

function AComponent({source}) {
    useEffect(() => {
        const subscription = source.subscribe();
        // TODO
        return () => {
          subscription.unsubscribe();
        };
    }, [source]); // 表示source改变时就是执行一遍
}

forceUpdate

function AComponent() {
    const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

    function handleClick() {
        forceUpdate();
    }
}

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}`;
}

получить предыдущийpropsа такжеstate

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  return <h1>Now: {count}, before: {prevCount}</h1>;
}

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}