React Hooks 教程

React Hooks 是 React 16.8 版本中引入的新特性，它允许你在不编写类的情况下使用 state 以及其他的 React 特性。以下是一些常用的 React Hooks。

常用 Hooks

• useState：用于在函数组件中添加 state。
• useEffect：用于执行副作用操作，例如数据获取、订阅或手动更改 DOM。
• useContext：用于在组件树中传递 context 值。
• useReducer：用于替代 useState 的更复杂的状态逻辑。
• useCallback：用于缓存函数，防止不必要的渲染。
• useMemo：用于缓存计算结果。

示例

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `你点击了 ${count} 次`;
  }, [count]); // 依赖项数组，只有 count 发生变化时才执行

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点击
      </button>
    </div>
  );
}

更多关于 React Hooks 的内容，可以查看官方文档。

图片

希望这份教程能帮助你更好地理解 React Hooks！