上期周刊时,我们提到接下来的几期都将以 React 为主题,层层引入,通过一个月的时间,完成对 React 的学习、升级、打怪直到自己成为 boss 的所有过程。
这一期,结束了入门( Vol.8 - React,“5 分钟快速入门”)之后,我们从“一个简单的组件”开始:
var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div> } }) React.render(<HelloMessage name="John" />,mountNode)
将进阶 React 之旅,分为组件、进阶思考、性能优化、Redux 及更具有实践性的应用五个部分。
深入了解组件
leozdgao - 了解一个 React 组件
先通过一个名为 A Simple Component 的例子让你初步接触下 React 组件,从了解组件、创建组件到弄明白组件的生命周期,希望这能快速开启你对组件的感知。
dmyang - 译丨React 组件的生命周期
基本上所有的 React 组件的生命周期方法都可以被分割成四个阶段:初始化、挂载阶段(mounting)、更新阶段、卸载阶段(unmounting)。这一次,让我们来近距离研究下各个阶段,并找出开发过程中容易被忽视的细节。
nanges - React 组件数据流 && 组件间沟通
使用 React,只有先知道如何传递数据,组件如何沟通,才能展示我们想要的数据。本文列举了组件交流过程中使用到的几种方式,希望能帮到你。
通过函数向现有组件类添加逻辑,就是高阶组件。借助函数的逻辑表现力,高阶组件的用途几乎是无穷无尽的。下次当你想写 mixin
或 class extends
的时候,不妨也考虑下高阶组件。
拓展阅读
进阶吧
用 300~400 行代码实现一个基本的 Virtual DOM 算法,这就是本文想要让你学会的。此外,希望在阅读本文之后,你不仅对 Virtual DOM 的算法思路有一个清楚了解,还能够对现有的前端编程产生新的思考。
淡苍 - 基于 Decorator 的组件扩展实践
组件配置式的方法在业务变化的过程中容易出现配置泛滥问题,从而使组件可维护性降低。近期项目,作者尝试用组件组合式开发思想,有效地解决了配置式存在的问题,一起来看看其思想的详细阐释和具体实践过程吧。
Cam - Immutable 详解及 React 中实践
有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的事,但因为同期 React 太火,它的光芒被掩盖了。无论哪种评价,这至少说明 Immutable 是很有价值的。让我们来一探究竟。
xile611 - React 实现 Table 的思考
Table 是最常用展示数据的方式之一,可是一个产品往往有很多非常类似的 Table,但是我们碰到的情况往往是 Table A 要排序,Table B 不需要……等这种看起来非常类似,但是又不完全相同的表格。本文将会详细的讲述这种 Table 组件解决方案产出的过程和一些思考。
拓展阅读
性能优化
当你开始接触到一些比较复杂的应用,比如构建一个图片分析器或者富文本编辑器,性能的瓶颈就是一个绕不过的坎。
grace_xhw - 译丨React 性能工程(上)、(下) - 深入研究 React 性能调试
这个系列译文,将会讲述使用 React 性能工具的一些基础知识、一些会导致 React 渲染瓶颈的常见问题,以及一些需要谨记的调试方法。然后通过实现一个简单版的 todo list,深入研究调试的工作流,来一步步完成性能调优。
hepeguo - React 高级性能优化
官方文档中译版:通过减少 UI 更新需要的花费较大的 DOM 操作,来更进一步地优化响应和速度
使用 production 版本
避免更新 DOM
shouldComponentUpdate 实战
Immutable-js 和 Flux
lcxfs1991 - React 移动 web 极致优化 、 腾讯新闻 React 同构直出优化实践
手机 QQ 团队使用 React 重构家校群和腾讯新闻,通过项目实战展示全面的性能优化策略、实践方案和开发工具。非常值得拜读。
Redux / Flux
Redux
Redux 是一个 JavaScript 应用状态管理的库,有一点和别的前端库或框架不同,它不单单是一套类库,它更是一套方法论,告诉你如何去构建一个状态可预测的应用。这部分,来进一步了解 Rudux。
ustccjw - Redux 介绍
单页面应用的痛点、Actions、Reducers 和 Store、Middleware、异步 Actions……本文主要是对 Redux 官方文档的梳理,当然,也有不少作者自身对 Redux 的理解。
andyyu0920 - 從<琅琊榜>學 Redux
一篇很有意思的文章,如圣旨般存在的 action、形似内阁的 action creator、有点像梁帝身边的太监总管高湛的 store……本文根据电视剧《琅琊榜》的角色呈现,从另一个角度来 Redux 的机制与运用。
程序猿小卡_casper - Redux 系列 01:从一个简单例子了解 action、store、reducer 丨 02:一个炒鸡简单的 React+Redux 例子
01 部分,一个极简单的俩字,让你对 redux 产生感性的认识。02 部分,就会通过一个例子,理性地帮助你掌握如何将 redux 跟 react 应用结合起来。
Flux
Flux 是 Facebook 用来构建用户端的 Web 应用程序的体系架构,与其它形式化的框架相比,它更像是一个架构思想,用于管理和控制应用中数据的流向。本模块,一起来熟悉 Flux。
meikidd - 译丨Flux 入门
本文概括性的介绍了如何使用 Flux 架构开发 JavaScript 应用,希望能用尽可能少的篇幅让你尽可能多的熟悉 Flux 核心概念。
Jiavan - 浅谈 Flux 架构及 Redux 实践
看了 Flux 的定义,想必你和作者一样,不是一脸懵逼,而是 N 脸懵逼。不过不慌,此类懵逼属于 Taylor 展开懵逼,细看展开式就可以。MVC、Flux 数据流框架……本文都介绍的很详细。
kuitos - 我对 React Flux 架构的理解
Flux 是什么?它的核心部分是什么?改如何 Fulx?相比于 MVVM,Flux 又存在哪些优势劣势,一篇作者对于 Flux 架构的理解,可拍砖可 star~
深入学习
阿城 - 解析 Redux 源码
作为 React 全家桶的一份子,Redux 可谓说也是名声响响,本文不说如何使用 Redux 的 API,而是通过阅读 Redux 的源码来学习它的使用以及思想。
shelbeniskb - Redux middleware 详解
Redux 作者 Dan 对 middleware 的描述:“It provides a third-party extension point between dispatching anaction,and the moment it reaches the reducer.”
middleware 提供了一个分类处理 action 的机会,在 middleware 中你可以检阅每一个流过的 action,挑选出特定类型的 action 进行相应操作,给你一次改变 action 的机会。
jafeney - 基于 Redux 架构的单页应用开发总结
一个基于 React + Redux + React-Route 框架,利用 webpack 进行模块化构建,前端编写语言是 JavaScript ES6,利用 babel 进行转换的项目开发及总结,希望通过这样一个比较完善的项目,检测你学习 Redux 过程中的细节。
劳卜 - Redux 状态管理方法与实例
如何利用 Redux 来管理你的 React 项目?在这里,作者会和你介绍一下官方文档中比较少出现,但是项目中却必备的知识点,一个基于 React + Redux + React-Router 的方法。
拓展阅读
项目与实践
通过一个 “苹果篮子” 实例,讲解作者所定义的 React+Redux 开发流程:布局组,静态和动态,对专注于写样式布局,大多是基本的 HTML+CSS 工作;逻辑组,action 和 reducer,专注于开发应用逻辑,基本都是 JS 工作。分工得到非常明确的规划,各个部件的耦合性很低,任务安排灵活性比较大。
charleyw - 微信小程序集成 Redux
微信的文档并没有指出如何使用第三方库,作者通过引入 Redux 管理小程序的模块化内容,在微信小程序中使用 Redux 实现 todo list,同时集成了 redux-devtools。
项目地址:charleyw / wechat-weapp-redux-todos | 演示地址:http://remotedev.io/local
kenberkeley - 可能是东半球最好的 React + Redux 启动器,基于 Vue Cli 二次开发
这是一个基于 Vue Cli 开发的 React 简易留言板 + 待办事项,项目架构优雅,且可以快速上手。项目地址:kenberkeley / react-demo
xiaoyann - 使用 Webpack + React + Redux + ES6 开发组件化前端项目
文如其题,这是复杂性 React 项目实践必看的一篇。项目地址:xiaoyann / webpack-react-redux-es6-boilerplate
(本期完)
往期周刊传送门:
# SegmentFault 技术周刊 #