当前位置：首页 > React

react中view如何订阅state

2026-01-25 02:07:01React

订阅 state 的常用方法

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

使用 useState 和 useEffect

通过 useState 创建 state，并在 useEffect 中监听其变化。当 state 更新时，useEffect 的回调函数会被触发。

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

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

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

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

使用 useContext

通过 React Context 共享 state，并在子组件中订阅 context 的变化。

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

const CountContext = createContext();

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

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <ChildComponent />
    </CountContext.Provider>
  );
}

function ChildComponent() {
  const { count } = useContext(CountContext);

  return <p>Count: {count}</p>;
}

使用 Redux

在 Redux 中，通过 useSelector 钩子订阅 store 中的 state 变化。

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

function MyComponent() {
  const count = useSelector(state => state.count);

  return <p>Count: {count}</p>;
}

使用 MobX

在 MobX 中，通过 observer 包装组件，使其自动订阅 state 变化。

import React from 'react';
import { observer } from 'mobx-react-lite';
import { observable } from 'mobx';

const store = observable({
  count: 0,
  increment() {
    this.count++;
  }
});

const MyComponent = observer(() => {
  return (
    <div>
      <p>Count: {store.count}</p>
      <button onClick={() => store.increment()}>Increment</button>
    </div>
  );
});

性能优化建议

在订阅 state 时，需要注意性能优化。例如，避免在 useEffect 中执行不必要的操作，或者使用 useMemo 和 useCallback 减少不必要的渲染。

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

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

  const memoizedValue = useMemo(() => {
    return count * 2;
  }, [count]);

  useEffect(() => {
    console.log('Memoized value updated:', memoizedValue);
  }, [memoizedValue]);

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