创建React组件的几种方式的对比

1. 父组件 ->前几层子组件： props

2. 父组件 ->非常深入的子组件(比如从最顶层到第5层以后): context

这种情况几乎很少见，除非写框架或者工具，最好是只用props，清晰明了

3. 子组件 ->父组件：callback

4. 子组件时间： 严格意义上不存在这种情况，如果出现这样的需求，说明你的写法是错误的，

数据的流向始终都应该是从顶至下。例如root ->(A,B,C) 所以A组件改变，需要让B改变时，A调用root以props传来的callback从而导致root的state发生变化，这样B就能得到更新

5.

当APP复杂的可能特殊情况：在使用pureRenderMixin来提升渲染速度的时候，非常里层的子组件需要一些参数来计算显示的值，但是你又不需要

当这个值改变的时候重新渲染这个组件而且也不想用context的时候, 在Root中定义this.getAllState= () =>

this.state， 然后将这个getAllState作为props传递给子组件； 这种情况很少出现，慎用

6.使用某种Flux，让局部组件链接一个自己的store，同时接受来自父组件的各种callback props， 通过这些callback实现 小组件的store改变时，通知父组件

在一个实际的APP中的实际情况是如何设计store和props的呢？

其实重点，我认为是store和store之间是如何交流数据的。

这里我斗胆地拿我在家写的一个编辑器来做一些分析：编辑器端Flommox, 播放器向redux迁移中

整个编辑器网站分成了不同的页面，每个页面(例如/course:id, /editor/:id, /quizs)对应一个Action分组+一个Store， 有的复杂页面可能需要很多歌store整个编辑器网站分成了不同的页面，每个页面(例如/course:id, /editor/:id, /quizs)对应一个Action分组+一个Store， 有的复杂页面可能需要很多歌store

这

个编辑器使用了不止一个store，在初次渲染是先隐藏了『资源d出框』『习题d出框』他们分别有自己的store，但是他们是否显示是由父组件的

store控制的，具体的数据交流第6点已经简单的说明了。有些flux框架可以让一个函数作为Action，那么这个就可以作为callback进行数

据交流了。

更好的方式：直接在Action里传递Promise， 甚至Observable

更更好的方式：使用Redux 的middleware， 在一个Action发送途中去做异步请求其他store的数据，Redux的Action中也可以传递thunk, promise，Observable ，function等，尽量少用callback，让整个APP更加functional programming, 更好管理

日常在开发中总是会遇到各种奇怪的需求，

最近在开发一个多人合作的项目时变遇到一个奇怪的需求，

对方之前开发了一个react组件，要求在这期迭代中嵌入到vue项目中。

npm i -S vuera

npm install --save react react-dom

这个时候发现第一个问题：

不难发现，这是vue项目中未jsx文件格式的问题所导致

解决办法：

编辑webpack.base.conf.js，加入对jsx的支持

这个时候第二个问题出现了：

原因：

.babelrc文件中默认引入了transform-vue-jsx，此插件将jsx转义成h function的形式供vue调用。

解决办法：

npm install --save-dev babel-plugin-transform-react-jsx

并且在.babelrc文件中

用transform-react-jsx替换transform-vue-jsx

至此，我们便完成了在vue项目中引入react组件的目的

效果：

npm i -S vuera

npm install --save vue

---