React.js 介绍与实战

在2016年1月10日的 Gamma技术分享做了关于 React 的演讲,以下为演讲的 keynote。

前端工程化

几年前的前端,javascript 里需要学习的东西可能主要是 jQuery。

而现在作为一名优秀的前端,你需要了解以下这些技能。


纵观这几年的前端发展,其实是前端工程化的一步步优化。

这是近几个月几种语言模块的统计,可以看到 node 的模块增长迅速。当然,有一部分原因是 npm 可以同时包含前端和后端的模块。

模块化

自动构建



React.js

React.js 是 Facebook 开发的一套 UI library,不同于一些大的 MV* 框架,它更偏重于 view 层的抽象和模块化。

Virtual DOM

React.js 引入的 Virutal DOM,一方面把开发者从原生 DOM 的限制里解脱了出来,可以自由定义组件和属性。另一方面,它的一套算法可以保证每次只更新变化的部分,减少对真实 DOM 的操作,提高性能。

组件

React 的页面由 component 组成,每个组件有自己的 props 和 state,props 是在组件初始化之后就不会改变的,而 state 是会不断变化的。另外有两个方法也非常重要,setState 是组件里唯一一个可以改变组件 state 的方法,而 render 则定义了如何把组件渲染到 DOM 里面。

下面的例子里,我们把一个页面里面的组件用框圈了出来。可以看出,一个页面可以由很多组件组成,大的组件里面也可以嵌套小的组件。

JSX

为了方便在组件里面定义渲染的内容,react.js 提倡使用 JSX 这样一种语法糖来定义组件,其效果就像是在 javascript 里面写 HTML,而实际上最终会被编译成纯 javascript 代码。比如下面两段代码是等价的。

例子

自定义的组件可以直接作为一个元素在另一个组件的里使用(类似 HTML 里的 tag),并拥有自己的 props(类似 HTML 里的 attributes),自由度大大增加!

下面的例子里我们定义了一个点击的事件回调,通过 setState 的方法改变了组件的一个 state,而当 state 改变的时候,React 会重新渲染变化的部分。

另一个非常有用的是一些 css 样式也可以直接写到组件里。当然,这里不是推崇 inline style,大部分的样式应该有独立的 stylesheet,但一些组件 state 关系紧密的样式可以用这种方法。

Redux/Flux

当一个页面组件非常复杂的时候,可以使用 Flux 或者 Redux 的架构。推荐使用 Redux,它借鉴了一些 functional programing 的优点,可以对交互事件和UI样式进行有效的抽象,更好地控制页面的数据流。具体这里就不赘述了,可以查看这篇 Redux教程

React Native

React Native 的思想和 React 非常相似,用 javascript 来写原生的 APP,并且可以同时支持 iOS 和 Android。T社的一款内部流程管理 APP 就是用 React Native 实现的,对于有 javascript 基础的开发者来说上手非常快速。但是对于复杂交互的 APP 性能上还是有些瓶颈。

小结

对于想迁移到 React.js 的团队,有以下几点建议。


任何技术都要看使用场景,在技术的世界里,万金油是不存在的,这也是技术如此令人着迷的原因。最好的方法是找到适合自己项目的最佳实践,并在开发过程中不断优化调整。今年 Angular 2.0 也要发布,很期待 React 和 Angular 在 2016年带给我们更多精彩。

注:keynote中图片部分来源于网络