《React Native 精解与实战》书籍连载「React Native 底层( 二 ) _组件

子父组件的通信
在开发过程中，不仅有父子之间的通信，有时还会有子组件向父组件通信传递值的需求，比如当子组件的某个值变更后，需要通知到父组件做相应的变更与响应，那么就会需要子父组件之间的通信。

文章插图
示例代码如下，在父组件的定义中，在调用子组件时，同样向子组件传递了一个参数，不过这个参数是一个函数，此函数用于接收后续子组件向父组件传递过来的数据，与之前父组件向子组件传递数据不太一样。
完整代码在本书配套源码的 03-04 文件夹。

/*** 章节: 03-04* 子父组件通信，父组件的实现* FilePath: /03-04/child-2-parent.js* @Parry*/import React, {Component} from 'react';import ChildComponent from './ChildComponent'class App extends Component {constructor(props) {super(props)this.state = {name: 'React'}}//传递到子组件的参数，不过参数是一个函数 。handleChangeName(nickName) {this.setState({name: nickName})}render() {return (父组件的 name：{this.state.name} 

 {this.handleChangeName(val)}}/>
);}}export default App;

下面为子组件的定义，子组件在页面中定义了一个按钮，点击此按钮后，调用自身的一个函数，修改了自身 state 中的值 name 为定义的值 Parry，那么此子组件的页面上的字符串将由之前的 Hello React! 变为 Hello Parry!，同时使用了 this.props.，也就是父组件调用时传递过来的函数，向父组件传递了的值 Parry 。
父组件在接收到子组件的调用后，调用了父组件自身的函数修改了自身的 state 中的 name 的值为 Parry，也就是子组件传递过来的 Parry，所以同时，父组件的页面上的值也同时由之前的 React 变更成了 Parry 。

/*** 章节: 03-04* 子父组件通信，子组件的实现* FilePath: /03-04/child-2-parent.js* @Parry*/import React, {Component} from 'react'export default class ChildComponent extends Component {constructor(props) {super(props)this.state = {name: 'React'}}handleChange() {const nickName = 'Parry';this.setState({name: nickName})//调用父组件传递过来的函数参数，传递值到父组件去 。this.props.changeName(nickName)}render() {const {name} = this.state;return (Hello {name}! 

)}}

多级组件之间的通信
如果组件之间的父子层级非常多，需要进行组件之间的传递，这时候当然可以通过上面介绍的方法进行一级一级的传递，但是当这种组件间层级很深的时候，这样的传递方法不是一个太好的方法。
解决的方法是首先要在设计 App 时，需要注意不能让组件之间的层级关系太深，一是为了避免组件之间通信的冗长，还有一个原因是太深的嵌套逻辑，用户体验上也不会很好，可以想象一下用户从最底层一层层操作返回到最顶层时的体验。
第二就是可以使用如对象或等方式进行多级组件间的通信，但是这种方式不推荐。
无直接关系组件间通信
前面提到的都是有层级关系的组件间的通信方式，而如果组件间没有层级的关系的话，可以通过如或 JSON 文件等方式进行无直接关系组件间的通信。
当然，还可以使用// 继承或实现接口的方式、模式或/的广播形式，都可以达到无直接关系组件间的通信。
这些组件间的通信方式使得组件之间的数据可以传递起来，后续的实战章节会有详细的代码实现，这里主要进行了理论部分的介绍。掌握这部分知识后才可以将 App 开发中的基本单位，也就是组件串联起来。