文档章节

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

SegmentFault
 SegmentFault
发布于 2016/10/21 13:23
字数 2621
阅读 21
收藏 1

输入图片说明

上期周刊时,我们提到接下来的几期都将以 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、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 的前端开发流程

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

(本期完) <br>


往期周刊传送门:


# SegmentFault 技术周刊 #

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

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

© 著作权归作者所有

SegmentFault
粉丝 17
博文 24
码字总数 41594
作品 2
杭州
高级程序员
私信 提问
五月前端知识集锦(每月不可错过的文章集锦)

目前自己组建的一个团队正在写一份面试图谱,将会在七月中旬开源。内容十分丰富,第一版会开源前端方面知识和程序员必备知识,后期会逐步写入后端方面知识。因为工程所涉及内容太多(目前已经...

夕阳
2018/10/28
0
0
ELSE 技术周刊(2018.01.08期)

本期推荐 浏览器页面资源加载过程与优化 本文介绍浏览器页面资源加载过程,在此基础上提出一些优化方法,并给出浏览器兼容性参考,最后展示各大厂商在前端性能优化上所使用的奇技淫巧,值得参...

2018/01/09
0
0
来用 TypeScript(技术周刊 2019-04-01)

前端快爆 WebKit 已经实现了 ResizeObserver API,此前该 API 已被 Chrome 支持。通过 ResizeObserver 可以监听元素盒子尺寸的变化。🔗 点评:随着 Edge 迁移到 Chromium 内核,只剩 Fire...

阿里妈妈前端快爆
04/03
0
0
前端相关整理

整理一下最近在网上收集的前端面试相关资料,包括预备知识、书籍、面试考点、面经等。前端方面资料其实太多太多,就光从知乎、前端乱炖、w3cplus 等网站就能找到很多,所以针对细节不发散,仅...

Seas0n_
2016/03/01
303
0
个人分享--web前端学习资源分享

1.前言 时间过得真快,转眼间现在是2017年最后一个星期,而今天也是圣诞节,过几天也是元旦了。每到年底,大家都习惯总结和分享,我也不例外。但是经历,我之前已经发过了,那么我今天就分享...

2017/12/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
今天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
今天
27
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
今天
63
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
今天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
今天
59
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部