当前位置：首页 > React

react如何定义数据

2026-01-24 03:37:50React

React 中定义数据的常用方法

在 React 中，数据通常通过组件的状态（state）或属性（props）来定义和管理。以下是几种常见的方式：

使用 useState Hook 定义局部状态

适用于函数组件，用于定义和管理组件内部的局部状态。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 定义初始值为 0 的状态

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

使用类组件的 state

适用于类组件，通过 this.state 和 this.setState 来管理状态。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 }; // 定义初始状态
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

通过 props 传递数据

父组件可以通过 props 向子组件传递数据。

function ChildComponent(props) {
  return <p>Received data: {props.data}</p>;
}

function ParentComponent() {
  const data = "Hello from parent";
  return <ChildComponent data={data} />;
}

使用 Context 共享全局数据

适用于需要在多个组件间共享数据的场景。

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

const DataContext = createContext();

function ParentComponent() {
  const sharedData = "Global data";
  return (
    <DataContext.Provider value={sharedData}>
      <ChildComponent />
    </DataContext.Provider>
  );
}

function ChildComponent() {
  const data = useContext(DataContext);
  return <p>Shared data: {data}</p>;
}

使用 useReducer 管理复杂状态

适用于状态逻辑较复杂的场景。

import React, { useReducer } from 'react';

const initialState = { count: 0 };

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

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
    </div>
  );
}

外部状态管理工具

对于大型应用，可以使用 Redux、MobX 或 Zustand 等状态管理库。

// 以 Redux 为例
import { createStore } from 'redux';

const store = createStore((state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
});