React 组件间的通信示例

前言

从官网上也有介绍组件间如何通信，但不够详细，这里做个小结，方便对比和回顾

本文内容

处理组件之间的通信， 主要取决于组件之间的关系，因此我们划分为以下三种：

【父组件】向【子组件】传值； 【子组件】向【父组件】传值； 【组件A】向无关系【组件B】传值，一般为兄弟组件；

一、「父组件」向「子组件」传值

这是最普遍的用法，实现上也非常简单，主要是利用props来实现

// 父组件import React from 'react';import Son from './components/son';class Father extends React.Component {  constructor(props) {    // 这里要加super，否则会报错    super(props);    this.state = {      checked: true    }  }  render() {    return (      <Son text="Toggle me" checked={this.state.checked} />    )  }}

// 子组件class Son extends React.Component {  render() {    // 接收来自父组件的参数    let checked = this.props.checked,      text = this.props.text;    return (      <label>{text}: <input type="checkbox" checked={checked} /></label>    )  }}

多想一点：

如果组件的嵌套层次太多，那么从外到内的交流成本就会加深，通过 props 传值的优势就不明显，因此，我们还是要尽可能的编写结构清晰简单的组件关系， 既也要遵循组件独立原则，又要适当控制页面，不可能或极少可能会被单用的代码片，可不编写成一个子组件

二、「子组件」向「父组件」传值

我们知道，react的数据控制分为两种，为 props 和 state；其中，props 如上刚介绍过，它是父组件向子组件传值时作为保存参数的数据对象；而 state 是组件存放自身数据的数据对象。这两者最主要的区别就是，props属于父组件传给子组件的只读数据，在子组件中不能被修改，而state在自身组件中使用时，可以通过setState来修改更新。

子组件向父组件传值，需要控制自己的state，并发起父组件的事件回调来通知父组件

// 父组件import Son from './components/son';class Father extends React.Component {  constructor(props) {    super(props)    this.state = {      checked: false    }  }  onChildChanged() {    this.setState({      checked: newState    })  }  render() {    let isChecked = this.state.checked ? 'yes' : 'no';    return (      <div>        <span>Are you checked: {isChecked }</span>        <Son text="Toggle me"            initialChecked={this.state.checked}           callbackParent={this.onChildChanged.bind(this)}         ></Son>      </div>    )  }}

// 子组件class Son extends React.Component {  constructor(props) {    super(props);    this.state = {      checked: this.props.initialChecked    }  }  onTextChange() {    let newState = !this.state.check.checked；    this.setState({      checked: newState    });    // 注意，setState 是一个异步方法，state值不会立即改变，回调时要传缓存的当前值，       // 也可以利用传递一个函数(以上传的是对象)，并传递prevState参数来实现数据的同步更新    this.props.callbackParent(newState);  }  render() {    let text= this.props.text;    let checked = this.state.checked;    return (      <label>{text}: <input type="checkbox" checked={checked} onChange={this.onTextChange.bind(this)}></label>    )  }}