Hooks基本介绍

大约 4 分钟

Hooks基本介绍

Hooks可让您从组件中使用不同的 React 功能。您可以使用内置 Hooks，也可以将它们组合起来构建自己的 Hooks。

Hooks 的出现，首先能解决如下的一些问题：

避免在类组件中冗长的代码和复杂的生命周期方法。
无需绑定 this
告别类组件，拥抱函数式编程

另外，Hooks 的出现，还有更加重要的一个信号，那就是整个 React 思想上面的转变，从“面向对象”的思想开始转为“函数式编程”的思想。这是编程范式上面的转变。

编程范式：

面向对象编程（OOP）：类、对象、继承、多态、封装、抽象

类是对象的蓝图或模板，定义了对象的属性和方法
对象是类的实例，具有类的属性和方法
继承：子类继承父类的属性和方法，并可以扩展自己的属性和方法
多态：同一个方法在不同对象中具有不同的实现
封装：将对象的属性和方法封装起来，对外提供接口
抽象：将复杂的对象或方法抽象成简单的对象或方法

函数式编程（FP）：函数是一等公民、纯函数、高阶函数、柯里化、函数组合

函数是一等公民：函数可以作为参数传递，也可以作为返回值返回
纯函数：相同的输入总是得到相同的输出，没有副作用
高阶函数：接受函数作为参数或返回函数的函数
柯里化：将一个多参数的函数转换成一系列单参数函数
函数组合：将多个函数组合成一个函数，从右到左执行

React Hooks 的优势

组件逻辑复用
状态共享
简化代码

useState 和 useEffect

useState

useState是一个 React Hook，可让你向组件添加状态变量。

const [ state, setState ] = useState(initialState);

[!NOTE]
useState在组件的顶层调用来声明状态变量

惯例是[something, setSomething]使用数组解构来命名状态变量。

useState返回一个包含两个值的数组：

当前状态。在第一次渲染时，他将匹配initialState参数的值。
该 setState 函数，用于更新组件的状态。它接受一个新的状态值，并重新渲染组件，同时将新的状态值传递给状态变量。

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

  // 定义一个增加 count 的函数
  const increase = () => {
    setCount(count + 1);
  }

参数：nextState：新的状态值。可以是任何类型，包括数字、字符串、对象、数组或函数。

当然，如果你将函数作为参数传递给 setState，它将被视为一个更新函数，而不是一个状态值。它必须是纯函数，将接收前一个状态作为参数，并返回一个新的状态值。

useEffect

useEffect 是一个 Hook，它允许您在函数组件中执行副作用操作。副作用操作包括数据获取、订阅或手动更改 React 组件中的 DOM。

useEffect(() => {
  // 在这里执行副作用操作
}, [dependencies]);

[!NOTE]
useEffect在组件的顶层调用来声明副作用操作

参数：一个包含副作用操作的函数和一个可选的依赖项数组。

副作用操作函数可以返回一个清理函数，该函数将在组件卸载或依赖项发生变化时执行。

依赖项数组：一个可选的数组，用于指定哪些依赖项的变化将触发副作用操作。如果省略该数组，副作用操作将在每次渲染后执行。

  useEffect(() => {
    // 在这里执行副作用操作
    return () => {
      // 在这里执行清理操作
    }
  }, [dependencies]);

自定义 Hooks

自定义 Hooks 允许您将组件逻辑提取到可重用的函数中。它们是普通的 JavaScript 函数，但使用自定义 Hook 的名称以 “use” 开头。

const useCustomHook = () => {
  // 在这里执行自定义逻辑
  return (
    // 返回组件需要的数据或函数
  );
}

[!NOTE]
自定义 Hook 的名称以 “use” 开头

自定义 Hook 可以使用其他 Hook，包括内置 Hook 和其他自定义 Hook。

const useCustomHook = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 在这里执行副作用操作
  }, [count]);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}