React组件通讯｜携手共进，无缝衔接

2023-09-10 21:06:43

React 组件通信：共享数据，构建复杂应用

React 组件是高度独立和自包含的单元，旨在管理自己的数据和行为。然而，在构建大型复杂应用程序时，组件之间不可避免地需要共享数据。本文将深入探讨 React 中实现组件通信的三种主要方式：props、state 和上下文。

1. Props：从父到子组件的数据传递

props 是父组件传递数据给子组件的最简单方法。通过在子组件标签中设置 props 属性，父组件可以指定要传递的数据。然后，子组件可以使用 this.props 属性访问这些数据。

// 父组件
const ParentComponent = () => {
  const data = { name: "John", age: 30 };

  return <ChildComponent data={data} />;
};

// 子组件
const ChildComponent = (props) => {
  return (
    <div>
      <h1>Name: {props.data.name}</h1>
      <p>Age: {props.data.age}</p>
    </div>
  );
};

2. State：组件内部的数据管理

state 是组件内部保存的数据。组件通过 this.state 属性访问和修改 state。state 的更改会触发组件的重新渲染。

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = { count: 0 };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

3. 上下文：跨组件共享数据

上下文是一种在组件树中共享数据的机制。通过 React.createContext() 函数创建上下文，父组件通过 Provider 组件提供上下文数据，子组件通过 Consumer 组件访问上下文数据。

// 创建上下文
const ThemeContext = React.createContext();

// 父组件
const ParentComponent = () => {
  const theme = "light";

  return (
    <ThemeContext.Provider value={theme}>
      <ChildComponent />
    </ThemeContext.Provider>
  );
};

// 子组件
const ChildComponent = () => {
  const theme = React.useContext(ThemeContext);

  return (
    <div>
      <h1>Theme: {theme}</h1>
    </div>
  );
};