React组件通讯介绍

1.基本介绍

组件是相对独立且封闭的单元，默认情况下，组件只能使用自己的数据

组件化的过程，就是将完整的功能拆分成组件，以更好的完成整个页面所需的功能，但是在过程中不可避免的组件需要用到其他组件的数据，那么打破组件的独立封闭让组件之间的数据互通，则是组件通讯的过程

组件之间的通讯方式大概分三种

1：父子组件之间

2：兄弟组件之间

3：跨组件层级

2.props的使用

props即是父组件可以传数据给子组件的方法

3.具体用法

组件分函数组件和类组件

函数组件用法

// 接收数据： 函数组件需要通过补充形参来获取
function 子组件(props) {
  console.log('从父组件中传入的自定义属性被收集在对象:', props)
  return (<div>子组件的内容</div>)
}

 类组件用法

// 接收数据： class 组件需要通过 this.props 来获取
class 子组件 extends Component {
  console.log('从父组件中传入的自定义属性被收集在对象:', this.props)
  render() { return (<div>子组件的内容</div>) }
}

关于props的三个注意事项

1.可以传递任何数据：数字， 字符串， 布尔类型， 数组， 对象， 函数， jsx

2.它是只读的：只能读取对象中的属性，无法修改

3.单项数据流（重点）：也叫做：自上而下的数据流

3.1 因子组件的数据都来自于父组件，所以当父组件数据更新后，子组件数据也会更新

3.2 父组件的数据会自动更新子组件，但是不能反过来子组件不能去修改父组件

4. props的children属性

只要该组件有子节点，那么props就有children属性，children 属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数）