风继续吹&&先行者成员:王广铎(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的难点?

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2016-11-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

从前端界面开发谈微信小程序体验

这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程。

17K15
来自专栏非著名程序员

Android学习第四弹之仿IOS“雨滴”拖拽的下拉刷新的ListView

仿IOS“雨滴”拖拽的下拉刷新 非著名程序员 我想Android开发者最头疼的莫过于在开发过程中什么都仿着IOS做,明明Android有自己独特的方式,也要用I...

2315
来自专栏ytkah

微信小程序开发教程第五章:微信小程序名片夹详情页开发

今天加了新干货!除了开发日志本身,还回答了一些朋友的问题。 闲话不多说,先看下「名片盒」详情页的效果图: ? ? 备注下大致需求:顶部背后是轮播图,二维码...

3898
来自专栏SEO

「知识」如何让蜘蛛与用户了解我们的内容?

2395
来自专栏我有一个梦想

UE4新手编程之创建C++项目

 虚幻4中常用的按键和快捷键 虚幻4中有一些按键和快捷键很常用,牢记它们并运动到实际的项目开发中,将会大大地提高你的工作效率和使得工作更简便快捷。下面将列举它们...

2516
来自专栏AhDung

【C#】组件发布:MessageTip,轻快型消息提示窗

原文和网盘demo我就不更新了,项目已开源到如下几处,有兴趣的朋友请关注,欢迎fork/push/pull:

1002
来自专栏互联网杂技

抛弃jQuery,拥抱原生JavaScript

Why not jQuery 1. 模式变革 jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表的以数据/...

3558
来自专栏张戈的专栏

关于网站图标favicon.ico那点事儿,你造吗?

众所周知,联盟成员导航是中国博客联盟的特色之一。而网站图标则是导航的装饰之一,起到锦上添花的作用,让页面更精美耐看。 但是随着成员数量的增长,图标便成了页面的拖...

7486
来自专栏葡萄城控件技术团队

【官宣】WijmoJS 2018 v3 正式发布,全面支持Angular7

WijmoJS(前端开发工具包)2018年度第三个大版本已经正式发布,本次更新除了全面支持Angular7之外,还允许用户使用Web Workers在前端更高效...

1252
来自专栏tkokof 的技术,小趣及杂念

Dev-C++,Time to say goodbye ?(更新2012-02-04)

  记得在那段很久以前的学生时代,自己曾经很反感Visual Studio的过度臃肿,再加上当时学校的实验PC陈腐老旧:经常假死的Windows 2000,外加...

982

扫码关注云+社区

领取腾讯云代金券