风继续吹&&先行者成员：王广铎(duo 二声)的作业分析，从他的作业理解“React单向数据流”

他的作业：“分页组件”React版，写的很好，主要是思路很清晰。本来是想上周日视频课程直播的时候讲一下了，现在只能是放在文章中大概的说说了。先看截图，

很low的UI，不过没关系，在这种时候UI并不是最重要的。

接下来看一下它的结构示意图，在根上是这个方法，

一切都是从这个“WrapComponent”出来的。在它以下，有下列这些方法，

然后这些方法对应的UI是这样的：

1，是左上的“有效的输入范围”；

2，是input输入框和button的搜索按钮；

3，是搜索结果和页码部分；

这个分页代码不多，JS部分也就400多行。但对来理解React的思路却是非常适合。

例如，React的单身数据流，在这里就可以很清晰的看到，

从图中的箭头，可以清晰的看到，数据是从data.js一路进入Panel的data方法中。

因为PanelSection是Panel的子组件，所以PanelSection中的data数据，是通过 this.state.data 从它的父组件（Panel）中获取。

然后InfoList和PageList都是PanelSection的子组件，所以它俩的data数据，又是通过 this.props.data 方法，从它俩的父组件（PanelSection）中获取。

再然后 PageListItem又是PageList的子组件，它的方法一样是从它的父组件中，通过 this.props.data 方法获取。

这一路下来，再结合这个示意图，不难发现这就是整个组件的数据流向，从父组件一路流向到子组件、孙组件、重孙组件。

现在看来，React中的数据传输的关键在于“props属性”，父组件控制子组件，都在于它，这就是我所理解的React单向数据流。

具体的代码实现，在先行者QQ群的文件共享里，文件名：“1030_组件作业 - 王广铎”，自己去下载来看，看不懂的照着写。多抄几遍就会了

这段时间感觉ReactJs，至少在具体的代码实现上，比我想像的要简单的多。

在我看来，它只是把JS的prototype和OO的方式，用另一种所谓的JSX语法重新写了一下而已。（不一定对，欢迎打脸）只是这个单向数据流的思路很新颖。别的东西，什么Flux等等我还没怎么看，也许那些才是React的难点？