写在前面
不管是多么不乐意待见这个不速之客,但ES6已经一点点渗透进了我的生活里,就连我最爱的React到React Native,默认都把ES6做为首选标准。这是FaceBook有计划、有声势地要把ES6推起来,请问还有谁有狗胆站住来堵着路不走。所以我毅然捧着阮一峰老师的《ES6标准入门》在一旁看了起来……那好,今天就谈谈如何把React用ES6愉快地跑起来。
入门级Demos
先来几个简单的demo体验一把。注意,例子里ES5的require请通过browserfiy或webpack来实现,如果你还不会用这两样东西,请出门后往前看。
“Hello,XXX”输出
ES5写法:
|
|
ES6写法:
|
|
数组遍历显示
ES5写法:
|
|
ES6写法:
|
|
ol与li的实现
ES5写法:
|
|
ES6写法:
|
|
Click事件
ES5写法:
|
|
ES6写法:
State的用法,以toggel显示文字为例
ES5写法:
|
|
ES6写法:
|
|
onChange事件,以及变量值的同步
ES5写法:
|
|
ES6写法:
|
|
定时任务事件的嵌入
ES5写法:
|
|
ES6写法:
|
|
从服务端获取数据
ES5写法:
|
|
ES6写法:
|
|
React Native实战
写一个简单的页面,支持输入关键字然后以列表形式呈现github里搜索出来的结果。效果如下:
ES5写法:
|
|
ES6写法:
|
|