React 组件通信：让你的组件交流起来

2023-01-06 21:55:51

组件通信在 React 应用程序中的关键作用

React 应用程序的构建离不开高效的组件通信。它允许组件共享数据和交互，从而创造出用户友好、响应迅速且可维护的界面。如果没有组件通信，React 应用程序中的组件将无法协同工作，导致一个支离破碎、非交互式的体验。

父子组件通信

父子组件通信是 React 中最常见的通信类型。在这种模式下，父组件将数据传递给子组件 ，子组件再将数据传递回父组件 。

父传子：

父传子通过 props（属性）实现，这是父组件传递给子组件的数据。子组件可以通过 this.props 访问这些属性。

// 父组件
class Parent extends React.Component {
  render() {
    return <Child name="John" age="30" />;
  }
}

// 子组件
class Child extends React.Component {
  render() {
    return (
      <h1>
        {this.props.name} is {this.props.age} years old.
      </h1>
    );
  }
}

字传父：

字传父通过事件处理来实现。子组件触发事件，父组件可以通过事件处理函数来监听这些事件。

// 父组件
class Parent extends React.Component {
  handleChildClick = () => {
    console.log("Child component was clicked!");
  };

  render() {
    return <Child onClick={this.handleChildClick} />;
  }
}

// 子组件
class Child extends React.Component {
  render() {
    return <button onClick={this.props.onClick}>Click Me!</button>;
  }
}

非父子组件通信

除了父子组件之外，组件之间还存在非父子关系的通信需求。以下是常见的非父子组件通信技术：

状态提升：

状态提升将共享状态提升到组件树中的公共祖先。这允许所有子组件访问共享状态，而无需直接通信。

// 公共祖先
class Grandparent extends React.Component {
  state = { count: 0 };

  render() {
    return (
      <>
        <Parent count={this.state.count} />
        <Child count={this.state.count} />
      </>
    );
  }
}

// 父组件
class Parent extends React.Component {
  render() {
    return (
      <h1>Parent Count: {this.props.count}</h1>
    );
  }
}

// 子组件
class Child extends React.Component {
  render() {
    return (
      <h1>Child Count: {this.props.count}</h1>
    );
  }
}

发布订阅者模式：

发布订阅者模式允许组件之间共享事件。发布者组件发出事件，订阅者组件侦听这些事件并做出反应。

// 发布者
class Publisher extends React.Component {
  state = { message: "" };

  publishMessage = (message) => {
    this.setState({ message });
  };

  render() {
    return <input onChange={(e) => this.publishMessage(e.target.value)} />;
  }
}

// 订阅者
class Subscriber extends React.Component {
  state = { message: "" };

  componentDidMount() {
    this.props.publisher.subscribe((message) => {
      this.setState({ message });
    });
  }

  render() {
    return <h1>Received Message: {this.state.message}</h1>;
  }
}

Context：

Context 是一种共享组件树中数据的技术。Context 对象可以被任何子组件访问，而无需直接通信。

// 创建 context 对象
const Context = React.createContext();

// 提供者组件
class Provider extends React.Component {
  state = { count: 0 };

  render() {
    return (
      <Context.Provider value={this.state.count}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

// 消费者组件
class Consumer extends React.Component {
  render() {
    return (
      <Context.Consumer>
        {(count) => <h1>Count: {count}</h1>}
      </Context.Consumer>
    );
  }
}