当前位置：首页 > React

react如何获取state

2026-02-12 07:55:13React

获取组件内的 state

在 React 类组件中，通过 this.state 直接访问当前组件的状态。例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

函数组件使用 useState Hook 时，通过解构数组直接获取状态值和更新函数：

function MyComponent() {
  const [count, setCount] = React.useState(0);
  return <div>{count}</div>;
}

子组件获取父组件的 state

通过 props 将父组件的 state 传递给子组件：

function Parent() {
  const [data, setData] = useState("parent data");
  return <Child parentData={data} />;
}

function Child({ parentData }) {
  return <div>{parentData}</div>;
}

跨组件共享 state

使用 Context API 实现跨层级组件状态共享：

const DataContext = React.createContext();

function App() {
  const [sharedData, setSharedData] = useState("global data");
  return (
    <DataContext.Provider value={sharedData}>
      <ComponentA />
    </DataContext.Provider>
  );
}

function ComponentA() {
  const contextData = useContext(DataContext);
  return <div>{contextData}</div>;
}

获取最新 state 值

在异步操作中获取最新 state 需使用函数式更新或 ref：

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

  useEffect(() => {
    setTimeout(() => {
      setCount(prev => prev + 1); // 使用函数确保获取最新值
    }, 1000);
  }, []);
}

使用 Redux 获取全局 state

通过 useSelector Hook 获取 Redux store 中的状态：

import { useSelector } from 'react-redux';

function Component() {
  const user = useSelector(state => state.user);
  return <div>{user.name}</div>;
}

react如何获取state