React 教程 - Hook

useState

useState 会返回一对值：当前状态和一个让你更新它的函数。

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量。
  const [count, setCount] = useState(0);

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

更新函数另一种用法：

<button onClick={() => setCount((prevCount) => prevCount + 1)}>
  Click me
</button>

useEffect

举🌰：

在componentDidMount()时执行一次，每次componentDidUpdate()都会再执行一次：

useEffect(() => {
    fetchUserInfo();
});

在回调函数中，返回一个函数，这个函数会在componentWillUnmount()时执行一次，通常用于清除副作用。

useEffect(() => {
    fetchUserInfo();
    return () => {
        clearUserInfo();
    };
});

以上代码，在每次组件重新渲染时，都会执行clearUserInfo();和fetchUserInfo();，可以在使用useEffect()时传第二个参数，用于判断是否需要在组件重新渲染时重新执行副作用。

useEffect(() => {
    fetchUserInfo();
    return () => {
        clearUserInfo();
    };
}, []);

Hook 规则

1. 只能在函数组件中使用 Hook，或者自定义 Hook 中使用其它 Hook，而不能在其它地方使用 Hook。
2. 只能在函数组件顶层使用 Hook，而不能在循环、条件或嵌套函数中使用 Hook。

自定义 Hook