React 中遇到的组件通讯问题以及解决方案-JavaScript中文网-JavaScript教程资源分享门户

在 React 中，组件通讯是非常常见的问题。比如父子组件之间的通讯、兄弟组件之间的通讯、跨级组件之间的通讯等。本文将介绍 React 中常见的组件通讯问题以及解决方案。

父子组件之间的通讯

在 React 中，父子组件之间的通讯是非常常见的问题。父组件可以通过 props 向下传递数据，子组件则可以通过 props 来接收数据。但是，如果父组件需要获取子组件的状态或者调用子组件的方法，就需要用到 refs。

refs

refs 是 React 提供的一个特殊属性，用于访问组件的实例。通过 refs，可以获取到组件的状态和方法。下面是一个示例：

// www.javascriptcn.com code example
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }

  handleClick() {
    const childState = this.child.current.state;
    console.log(childState);
    this.child.current.method();
  }

  render() {
    return (
      <div>
        <Child ref={this.child} />
        <button onClick={this.handleClick.bind(this)}>获取子组件状态和调用子组件方法</button>
      </div>
    );
  }
}

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

  method() {
    console.log('调用了子组件的方法');
  }

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

在上面的例子中，我们通过 refs 获取到了子组件的实例，并可以访问其状态和方法。需要注意的是，refs 只在组件挂载后才会被赋值，所以在组件的生命周期方法中使用 refs 时需要注意。

兄弟组件之间的通讯

在 React 中，兄弟组件之间的通讯通常需要借助父组件来实现。父组件作为中介，将数据传递给兄弟组件。

状态提升

状态提升是 React 中常用的一种解决方案。通过将需要共享的状态提升到它们的最近公共祖先组件中，可以实现兄弟组件之间的通讯。下面是一个示例：

// www.javascriptcn.com code example
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  handleClick() {
    this.setState({
      count: this.state.count + 1
    });
  }

  render() {
    return (
      <div>
        <Child1 count={this.state.count} />
        <Child2 count={this.state.count} handleClick={this.handleClick.bind(this)} />
      </div>
    );
  }
}

function Child1(props) {
  return <div>{props.count}</div>;
}

function Child2(props) {
  return <button onClick={props.handleClick}>增加</button>;
}

在上面的例子中，我们将需要共享的状态 count 提升到了父组件中，并通过 props 传递给了兄弟组件。当点击 Child2 组件中的按钮时，会调用父组件中的 handleClick 方法，从而改变 count 的值。

跨级组件之间的通讯

在 React 中，跨级组件之间的通讯也需要借助父组件来实现。但是，如果跨级组件之间的层级比较深，通过 props 一层层传递数据会非常麻烦。这时，可以使用 Context。

Context

Context 是 React 提供的一种跨组件传递数据的方式。通过 Context，可以在组件树中传递数据，而不需要一层层地通过 props 传递。下面是一个示例：

// www.javascriptcn.com code example
const UserContext = React.createContext();

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        name: '张三',
        age: 18
      }
    };
  }

  render() {
    return (
      <UserContext.Provider value={this.state.user}>
        <Child />
      </UserContext.Provider>
    );
  }
}

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

function Grandchild() {
  return (
    <UserContext.Consumer>
      {user => (
        <div>
          <div>姓名：{user.name}</div>
          <div>年龄：{user.age}</div>
        </div>
      )}
    </UserContext.Consumer>
  );
}

在上面的例子中，我们通过 createContext 创建了一个 UserContext，并在父组件中通过 UserContext.Provider 来提供数据。在子组件中，我们通过 UserContext.Consumer 来消费数据。

需要注意的是，当 Provider 的 value 值发生变化时，所有 Consumer 组件都会重新渲染。所以，Context 适用于跨级组件之间的通讯，但不适用于高频率的更新。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d363c2a941bf7134666206

React 中遇到的组件通讯问题以及解决方案