React Hooks 是 React 16.8 版本引入的新特性，它允许我们在不编写类的情况下使用 state 以及其他的 React 特性。以下是一些关于 React Hooks 的基本规则：

基本规则

  1. 只能出现在函数组件内部：Hooks 不能在普通 JavaScript 函数中调用。
  2. 只能从顶层调用：不能在嵌套函数或 if/for 循环内部调用。
  3. 每次渲染都会重新调用：Hooks 的调用会创建一个新的 state 变量或 effect 函数。

常用 Hooks

  • useState：用于在函数组件中添加 state。
  • useEffect：用于在组件渲染后执行副作用操作。
  • useContext：用于访问 context 值。
  • useReducer：类似于 useState，但适用于更复杂的状态逻辑。
  • useCallback 和 useMemo：用于优化性能。

示例

import React, { useState } from 'react';

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

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

更多关于 React Hooks 的内容，请访问React Hooks 教程。

图片

中心展示一张 React 图标图片：

React Icon