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

blackwolf 发布于1年前 阅读12370次
0 条评论

 

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)优化你的代码

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

拓展阅读

进阶吧

戴嘉华 - 深度剖析:如何实现一个 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 组件解决方案产出的过程和一些思考。

拓展阅读

性能优化

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

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、reducer02:一个炒鸡简单的 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 的前端开发流程

通过一个 “苹果篮子” 实例,讲解作者所定义的 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 技术周刊 #

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

每周二更新,欢迎「关注」或者「订阅」。大家也可以在评论处留言自己感兴趣的主题,推荐主题相关的优秀文章。

需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。