SegmentFault 技术周刊 Vol.9 - 进阶吧！React

上期周刊时，咱们提到接下来的几期都将以 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，只有先知道如何传递数据，组件如何沟通，才能展现咱们想要的数据。本文列举了组件交流过程当中使用到的几种方式，但愿能帮到你。

kpaxqin - React 进阶 —— 使用高阶组件（Higher-order Components）优化你的代码

经过函数向现有组件类添加逻辑，就是高阶组件。借助函数的逻辑表现力，高阶组件的用途几乎是无穷无尽的。下次当你想写 mixin 或 class extends 的时候，不妨也考虑下高阶组件。

拓展阅读

• 译丨React 组件中绑定回调

• 如何科学的组织 React 组件样式

• React 中的 Portal 组件

• 从 auto-ellipsis 看 React 组件开发

进阶吧

戴嘉华 - 深度剖析：如何实现一个 Virtual DOM 算法

用 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 组件解决方案产出的过程和一些思考。

拓展阅读

• CSS Modules 详解及 React 中实践

• React 数据为何要使用 immutable 方式？浅复制与深复制思考

• React 同构实践与思考

• react-router 按需加载

• 译丨react-css-modules

• React实践 - Component Generator

性能优化

当你开始接触到一些比较复杂的应用，好比构建一个图片分析器或者富文本编辑器，性能的瓶颈就是一个绕不过的坎。

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 的方法。

拓展阅读

• Redux 入门、Redux 进阶

• Redux 莞式教程之简明篇、进阶篇

• 关于 Redux 的一些总结(一)：Action & 中间件 & 异步

• Redux、Flux、Vuex

• React 为何须要 Flux-like 的库

项目与实践

李伟鹏 - 实例讲解基于 React+Redux 的前端开发流程

经过一个 “苹果篮子” 实例，讲解做者所定义的 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

（本期完）

---

往期周刊传送门：

• Vol.1 - Vue.js 起手式

• Vol.2 - 666，ES6

• Vol.3 - 先后端分离与前端工程化

• Vol.4 - 这份 Android 有点甜

• Vol.5 - Build, Ship, Run, and Monitor with Docker

• Vol.6 - 面试那些事儿

• Vol.7 - iOS丨好好学习，从娃抓起~

• Vol.8 - React，“5 分钟快速入门”

---

# SegmentFault 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列，一周一主题。周刊筛选的每篇内容，是做者的独到看法，踩坑总结和经验分享。

每周二更新，欢迎「关注」或者「订阅」。你们也能够在评论处留言本身感兴趣的主题，推荐主题相关的优秀文章。