当前位置：首页 > React

react中view如何订阅state

2026-03-11 11:04:33React

在 React 中，组件可以通过多种方式订阅和响应 state 的变化。以下是常见的方法：

使用 `useState` 和 `useEffect`

函数组件可以通过 useEffect 监听 state 的变化。useEffect 会在 state 更新后触发副作用逻辑。

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

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

  useEffect(() => {
    console.log('Count changed:', count);
    // 执行 state 变化后的逻辑
  }, [count]); // 依赖数组指定监听的 state

  return (
    <button onClick={() => setCount(count + 1)}>
      Increment: {count}
    </button>
  );
}

使用 `useReducer` 和 `useEffect`

如果 state 逻辑较复杂，可以使用 useReducer 管理 state，并通过 useEffect 订阅变化。

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

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

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

  useEffect(() => {
    console.log('State updated:', state.count);
  }, [state.count]);

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

使用 Context API 订阅全局 state

对于跨组件的 state 共享，可以通过 useContext 订阅 Context 中的 state 变化。

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

const CountContext = createContext();

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      <Child />
    </CountContext.Provider>
  );
}

function Child() {
  const { count, setCount } = useContext(CountContext);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

使用第三方状态管理库（如 Redux）

在 Redux 中，可以通过 useSelector 订阅 store 中的 state。

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch({ type: 'INCREMENT' })}>
      Count: {count}
    </button>
  );
}

使用自定义 Hook 封装订阅逻辑

可以封装自定义 Hook 来复用 state 订阅逻辑。

react中view如何订阅state

import { useState, useEffect } from 'react';

function useCountSubscription(initialValue) {
  const [count, setCount] = useState(initialValue);

  useEffect(() => {
    console.log('Count updated:', count);
  }, [count]);

  return [count, setCount];
}

function MyComponent() {
  const [count, setCount] = useCountSubscription(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

以上方法覆盖了从简单到复杂的 state 订阅需求，具体选择取决于应用场景和状态管理规模。