React Hooks

React Hooks 允许您在无需编写 class 组件的情况下，在函数组件中使用状态 state 、副作用 effect 等特性。Hooks 提供了更简洁易理解方式来编写组件。

• useState 函数

import React, { useState } from 'react';

function Counter() {
  // 声明一个名为 count 的状态变量，初始值为 0，以及用于更新 count 的函数 setCount
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数：{count}</p>
      {/* 点击按钮时，调用 setCount 更新 count */}
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

• useEffect 函数

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

function DataFetcher() {
  const [data, setData] = useState([]);

  // useEffect 用于处理副作用，比如数据获取、订阅等
  useEffect(() => {
    // 模拟数据获取
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空数组表示只在组件挂载和卸载时运行

  return (
    <div>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

• useContext 函数

import React, { useContext } from 'react';

// 创建一个 Context
const ThemeContext = React.createContext();

function ThemedButton() {
  // 使用 useContext 获取 Context 中的值
  const theme = useContext(ThemeContext);

  return (
    <button style={{ backgroundColor: theme.background, color: theme.foreground }}>
      Themed Button
    </button>
  );
}

function App() {
  const theme = { background: 'blue', foreground: 'white' };

  return (
    <ThemeContext.Provider value={theme}>
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

• useRef 函数

import React, { useRef } from 'react';

function FocusableInput() {
  // 创建一个 ref 对象，并将其赋值给 inputRef
  const inputRef = useRef(null);

  // 在组件挂载后，自动聚焦到输入框
  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
}

• useMemo 函数

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

function ExpensiveCalculation({ data }) {
  // 使用 useMemo 缓存昂贵的计算结果
  const result = useMemo(() => {
    // 进行基于 data 的复杂计算
    return data * 2;
  }, [data]);

  return <p>计算结果: {result}</p>;
}

• useCallback 函数

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

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

  // 使用 useCallback 缓存回调函数，避免不必要的重新创建
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>计数：{count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>增加</button>;
}

以上是 React Hooks 中的一些示例用法 useState 、 useEffect 、 useContext 、 useRef 、 useMemo ， useCallback 等常用的 Hooks。