react常用 Hooks

React Hooks 是 React 16.8 引入的一项功能，它允许你在函数组件中使用状态和其他 React 特性，而不需要编写类组件。Hooks 使函数组件可以管理本地状态、处理副作用、使用上下文等，使得函数组件更加强大和灵活。以下是常用的 React Hooks 及其使用方法：

useState

import React, { useState } from 'react';

const Counter = () => {
  // 声明一个状态变量 `count` 和更新它的函数 `setCount`
  const [count, setCount] = useState(0);

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

参数:

• useState(initialState): initialState 是状态的初始值。

返回值:

• [state, setState]: 返回当前状态和更新状态的函数。

 useEffect

useEffect 允许你在函数组件中执行副作用，比如数据获取、订阅或手动操作 DOM。

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

const Example = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 进行副作用操作，例如数据获取
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));

    // 可选的清理函数
    return () => {
      // 执行清理操作
    };
  }, []); // 空数组表示仅在组件挂载时执行

  return (
    <div>
      {data ? <p>{data.message}</p> : <p>Loading...</p>}
    </div>
  );
};

参数:

• useEffect(callback, dependencies): callback 是副作用函数，dependencies 是依赖数组，指定了 effect 何时需要重新执行。

返回值:

• undefined 或一个清理函数（如果需要清理副作用）。

useContext

useContext 允许你在组件中访问上下文。

import React, { createContext, useContext } from 'react';

// 创建上下文
const MyContext = createContext('default value');

const ChildComponent = () => {
  const value = useContext(MyContext);
  return <p>Value from context: {value}</p>;
};

const ParentComponent = () => {
  return (
    <MyContext.Provider value="Hello Context">
      <ChildComponent />
    </MyContext.Provider>
  );
};

参数:

• useContext(Context): Context 是你创建的上下文对象。

返回值:

• 上下文的当前值。

useReducer

useReducer 是 useState 的替代方案，适用于管理复杂状态逻辑。

import React, { useReducer } from 'react';

// 定义 reducer 函数
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

参数:

• useReducer(reducer, initialState): reducer 是处理状态更新的函数，initialState 是初始状态。

返回值:

• [state, dispatch]: 返回当前状态和 dispatch 函数，用于发送动作。

useMemo

useMemo 用于优化性能，通过缓存计算结果来避免不必要的计算。

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

const ExpensiveComponent = ({ value }) => {
  // 使用 useMemo 缓存计算结果
  const computedValue = useMemo(() => {
    // 假设这是一个昂贵的计算
    return value * 2;
  }, [value]); // 依赖项数组

  return <p>Computed Value: {computedValue}</p>;
};

const ParentComponent = () => {
  const [value, setValue] = useState(1);

  return (
    <div>
      <ExpensiveComponent value={value} />
      <button onClick={() => setValue(value + 1)}>Change Value</button>
    </div>
  );
};

参数:

• useMemo(() => computeValue, [dependencies]): computeValue 是计算结果的函数，dependencies 是依赖数组。

返回值:

• 缓存的计算结果。

 useCallback

useCallback 用于缓存回调函数，避免每次渲染时创建新的函数实例。

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

const Button = ({ onClick }) => {
  return <button onClick={onClick}>Click Me</button>;
};

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // 依赖项数组

  return (
    <div>
      <Button onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
};

参数:

• useCallback(callback, [dependencies]): callback 是需要缓存的回调函数，dependencies 是依赖数组。

返回值:

• 缓存的回调函数。

自定义 Hooks

除了内置 Hooks，你还可以创建自定义 Hooks 来重用状态逻辑。

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
};

使用自定义 Hook:

const App = () => {
  const { data, loading, error } = useFetch('https://api.example.com/data');

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <div>Data: {JSON.stringify(data)}</div>;
};

总结

React Hooks 使得函数组件能够实现与类组件相同的功能，提供了更简单的 API 和更强大的功能。通过 useState、useEffect、useContext、useReducer、useMemo 和 useCallback 等 Hooks，你可以在函数组件中管理状态、处理副作用、使用上下文等，构建更复杂和高效的 React 应用。