react组件通讯

一.props的特点

 1.可以传递任意类型的值，如字符串，数字，对象及函数。

 2.props是只读的对象，只能读取属性的值，无法对其进行修改。

3.如果类组件内有constructor构造函数，应该将props传递给super()，否则无法在构造函数中获取props。

二.组件通讯的三种方式

   2.1.父传子；

      1.父组件提供要传递的state数据。

      2.子组件内标签添加属性，值为state中的数据。

      3.子组件内部再通过props接受数据。 如下图：

        

2.2 子传父

与vue类似，通过子组件出发父组件的回调函数进行传递；

1.先通过父组件给子组件绑定回调函数，并在父组件中进行此函数的定义。

2.再到子组件中绑定一个函数，通过此函数调用props拿到父组件给子组件绑定的回调函数，通过执行此函数可以拿到this.state里的数据，执行父组件的回调函数在父组件中拿到子组件函数传递过来的数据。 如下图：

2.3 兄弟组件

将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态，称之为状态提升；例如组件A和组别B想要互相通信，则可通过公共父组件C进行传递，将A与B的通讯过程拆分为父子间的通讯过程。

另：如有多层嵌套，使用React.creatContext提供的Provider, Consumer组件进行数据的传递