当前位置：首页 > React

react 实现数据

2026-01-26 13:15:03React

在 React 中实现数据管理

React 提供了多种方式来处理和管理数据，包括组件状态、上下文 API 和外部状态管理库。以下是几种常见的数据管理方法：

使用 useState 管理组件内部状态

对于简单的组件级状态管理，可以使用 React 的 useState Hook。这种方法适合管理不需要在多个组件间共享的数据。

import React, { useState } from 'react';

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

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

使用 useContext 共享全局数据

当需要在多个组件间共享数据时，可以使用 React 的上下文 API。这种方法避免了通过 props 层层传递数据的麻烦。

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

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
}

使用 Redux 管理复杂应用状态

对于大型应用，Redux 提供了一个可预测的状态容器。它通过单一数据源和纯函数来管理应用状态。

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

// Reducer
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

// Store
const store = createStore(counterReducer);

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

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

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

使用 React Query 管理服务器状态

React Query 专门用于处理异步数据获取和缓存，简化了与服务器的数据交互。

import { useQuery } from 'react-query';

function fetchPosts() {
  return fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json());
}

function Posts() {
  const { data, isLoading, error } = useQuery('posts', fetchPosts);

  if (isLoading) return 'Loading...';
  if (error) return 'Error!';

  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}