React Hooks 简介

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

• useState：用于在函数组件中添加 state。
• useEffect：用于在组件挂载和更新后执行副作用操作。
• useContext：用于在组件中订阅 Context。
• useReducer：用于替代 useState 和 useContext。
• useCallback 和 useMemo：用于优化性能。

常用 Hooks 列表

以下是 React 中一些常用的 Hooks：

• useState
• useEffect
• useContext
• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

图像展示

useState 示例

import React, { useState } from 'react';

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

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

useState 示例

useEffect 示例

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // 依赖于 count 的变化

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

useEffect 示例