2019-05-01 React组件通信

父子

1. 父子通信(回调函数)[组件通信]

父传子:父组件传一个函数给子组件,子组件在恰当的时候调用

子传父:1.父组件将一个函数 fn 作为子组件的 props 传给子组件
2.子组件在恰当的时候调用这个 fn，并且把数据放在 fn 的参数里

如龟兔赛跑的例子

2. 问爷孙组件如何通信?
   爷爷传给爸爸,爸爸再传给孙子

父子通信例子

---

eventHub发布订阅模式

首先建立一个管家,然后需要操作就通知管家,管家操作完后发给App,App再逐一发给下面的人
花钱的例子

---

Redux

花钱Redux的例子

Redux特点:

1. 所有的动作通过事件来沟通
2. 所有数据放在顶层

Redux缺点:

1. 将事件名和参数做了约束,每个事件都必须有事件名和参数,所有事件都要列入列表内,否则不接受
2. 不能用State,只有以props的形
   式去用State

Redux优点:

1. 把event归类,不能瞎命名
2. 要求所有数据是只读,任何组件不能修改根级数据,但是没法禁止
3. 制造一些概念让不好好学的人滚蛋

---

简述 React 任意组件之间如何通信。

1. 如果只是父子级关系，父级可以将一个回调函数当作属性传递给子级，子级可以直接调用函数从而和父级通信。
2. 使用eventHub观察订阅模式:就是建立一个管家,然后需要操作就通知管家,管家操作完后发给App,App再逐一发给下面的人
3. 使用redux组件通过dispatch发出action，store根据action的type属性调用对应的reducer并传入state和这个action，reducer对state进行处理并返回一个新的state放入store，connect监听到store发生变化，调用setState更新组件，此时组件的props也就跟着变化。