SegmentFault 技术周刊 Vol.8 - React，“5 分钟快速入门”

时间 2019-11-05

标签 segmentfault 技术周刊 vol.8 vol react 分钟快速入门栏目 React 繁體版

原文原文链接

前段时间开始学习 React，浏览官方文档时，被其中说起的一篇文章——《Give It Five Minutes》给吸引了。最开始觉得是“5 分钟学会 React”这种神通常存在的教程，结果否则，它只是 37 Signal 日志 SVN（Signal v.s. Noise）中的一篇文章……可这篇文章却给了我学习 React 不可或缺的一个理由。至于缘由，give me five minutes，听我细细道来。css

《Give It Five Minutes》描述了做者 Jason Fried 在一次商业创新工厂演讲活动中，遇到了“Richard Saul Wurman”，所以发生了重大人生变化的故事。html

事情是这样的，几年前，Jason 仍是个急性子，只要是不符合做者世界观的事情，做者就会极力反驳。此外，做者也热衷于第一个发表观点和想法，彷佛第一个提出来就意味着一些事儿。而这一切，都在 2007 年的一天发生了变化。前端

在一次商业创新工厂的会议演讲上，做者遇到了同去演讲的 Richard Saul Wurman。Richard 在做者的演讲结束后上台发表观点，在介绍完本身，并称赞了 Jason 的演讲以后，Richard 开始了本身的演讲。演讲途中，做者打断了 Richard 的发言，并对他提到的库存的一些想法提出了反对。正由于做者性急，又恰巧碰到了本身不一样意的观点，因此演讲中，只要一遇到不一样意 Richard 的观点，就马上起身反驳。react

而此刻的 Richard 却很是淡定，并用很是简单的一句话回应做者“Man, give it five minutes.”而正是这句话，改变了做者一辈子。webpack

Richard 说有不一样观点是好事儿，对不一样观点进行回应也是好事儿，有坚决的想法和本身的信念更是一件好事。可是，在你肯定要反驳个人观点的时候，请给我一些时间去阐明个人观点，听完个人阐述。5 分钟意味着思考，而不是立刻回应（“Five minutes” represented “think”, not react）。git

而这一刻，也引起了做者后续的深入思考，并时刻提醒本身将先去思考而非快速回应做为长久的追求。github

深夜读来，文章有点像鸡汤，但是，学 React 以前，必定要干了这碗鸡汤。React 挑战了不少传统的知识，不少想法，可能第一眼看上去有点难以想象，但 give it five minutes，要知道，这些看似疯狂的想法已经帮助 Facebook 和 Instagram 从里到外建立了上千的组件。web

接下来几期周刊，都将以 React 为主题，层层引入，经过一个月的时间，完成对 React 的学习、升级、打怪直到本身成为 boss 的全部过程。本期，咱们以社区诸位小伙伴一路走来的经验分享为重点，让你尽可能快速学习 React。面试

5 分钟实例

首先，来看两个简单的小应用，让你预览 React 能够干吗。ajax

noiron - 用 React.js 写一个最简单的 To-do List 应用

经过一个简单的 To-do List 应用，让你对 React 的最基础用途——组件（component）造成基本的认识，包括组件结构、组件两种属性的传递（state 和 props）以及函数的传递，浅入浅出，对于理解 React 中的一些概念及语法颇有帮助的。

defshine - 使用 React 和 Flask 开发一个留言板

经过这个应用，你会对“React 能够干吗”有更多的了解：

组件化开发，React 提倡无状态的组件，便于重用
专一于 View，React 不是 MVC 框架，它只是一个专一于 View 的库，因此，它也能够和不少其余框架或者库一块儿使用
提供完成的生命周期

注：上面这两个小应用的项目分别能够在 noiron / simplest-react-todolist 和 defshine / message-board 查看。

快速入门

经过上面的例子，能够看出，React 其实比较好上手，即便没来得及了解细节性的知识，有时也不妨碍项目的开展。不过，正统地学习，能让你更全面地理解 React，更清晰地了解它的使用逻辑。除了官方文档和阮一峰老师的《React 入门实例教程》，如下精选的几篇文章还将丰富你的学习资料库。

布利丹牵驴子 - React 入门及资源指引

Facebook 在开源项目和软件架构方面的实力让人不得不赞叹，React 中提出的一些设计思想很是新颖，极大的简化了前端开发的代码逻辑。本文介绍 React 相关的基础知识，JSX、组件、区分 props 和 state、生命周期、事件系统……经过对这些关键内容的学习，快速开始 React 的学习之路。

whatif - Sublime Text 3 搭建 React.js 开发环境

利用 Sublime 很强的自定义功能和庞大的插件库，来，手把手式的强大开发环境搭建方案，不谢。

赖小赖小赖 - React 初探

来自 AlloyTeam 的分享，一篇文章学完全部基本特性，保入门。

zhangwang - 是时候理清 React 开发中的一些疑惑了

这篇则让你明白为何要使用 React，以及更重要的，它所带来的改变。你从这些改变再回去看 React 为何要设计成这样，可能会理解得更通透。

「这是一个老生常谈的问题了，好比说它的虚拟 DOM 能够被高效的渲染，好比说它有完整生命周期的“活组件”，它的组件化使得项目结构很是清晰，代码复用很是容易，好比说它的数据管理机制也能让你清晰的知晓数据的状态，而 React 自己就是被这种清晰的数据所驱动的。」

更多入门阅读

源码阅读

入门完毕，如果没法深刻其内部实现机制和原理，亦会以为不够透彻，所谓知其然更要知其因此然，接下来就从剖析 React 源码开始吧。

React 源码剖析系列 - 生命周期的管理艺术、解密 setState、难以想象的 React diff、玩转 React Transition

本系列文章但愿经过剖析 React 源码，帮助你理解其内部的实现原理。固然，阅读这一系列的文章，你须要对 React 有必定的了解，若是你还存在疑惑，请回上部分再次巩固。

JasonHuang - React Motion 缓动函数剖析

“不知道这个世界上有没有‘仿世学’，但既然动画要模仿现实世界，那么实现动画的根本方法就是借鉴上帝的办法——模拟天然规律”。本文以 React Motion 实现原理为背景，介绍一种通用的模拟物理规律的方法，以及如何使用这种方法实现 React Motion 的缓动函数。来跟着做者当一回上帝吧。

louis110 - GraphQL and Relay 浅析

GraphQL 是在 Facebook 内部应用多年的一套数据查询语言和 runtime。包括类型系统、验证、introspection，此外，还具备语法灵活、没有冗余、强类型等特征。而 Relay 则是链接 GraphQL 和 React 的一座桥梁，除了让 React 认识 GraphQL 服务器以外，还包括把关于数据获取的事情（请求异常，loading 等）都接管过来……

郭林烁_joey - 前端路由实现与 react-router 源码分析

“从点击 Link 到 render 对应 component，路由中发生了什么？”在单页应用上，前端路由并不陌生。不少前端框架也会有独立开发或推荐配套使用的路由系统。那么，当咱们在谈前端路由的时候，还能够谈些什么？本文经过简要分析并实现一个的前端路由，来对 react-router 进行分析。

基本特性

JSX、Mixin、Context、Virtual DOM、react-css-modules、包react-hot-loader、react-router、Redux、Flux、relay……太多特性了，这期咱们挑选其中一些基本的，分别作入门介绍。

MockingBird - 译丨React Mixin 的使用

在 React component 构建过程当中，经常有这样的场景，有一类功能要被不一样的 Component 公用，而后看获得文档常常提到 Mixin（混入）这个术语。此文就从 Mixin 的来源、含义、在 React 中的使用提及。

BetaRabbit - React 如何和 Server 交互

这篇讲解 React ajax 的 4 种交互方式：Root Component、Container Component、Redux/Flux Async Actions 以及 Relay，清晰明了。

小俞 - React Reflux

Reflux 是根据 React 的 Flux 建立的单向数据流类库，其单向数据流模式主要由 actions 和 stores 组成。本文会很是细致地说明如何建立 action 和 store，以及和组件的结合。

cnsnake11 - React Native 的组件架构设计

篇幅较长但不冗余的一篇文章，前半部分是目前 Flux 开源框架的一些分析，后半部分是架构设计过程。此外，还有多种方案以及完整 demo 代码提供诸位学习。

Hongchun - 深刻理解 react-router 路由系统

在 web 应用开发中，路由系统是不可或缺的一部分。当前，Backbone、Ember 等主流框架都有其本身的路由器，那 react-router 相对于其余路由系统会针对 React 作了哪些优化呢？它是如何利用了 React 的 UI 状态机特性呢？又是如何将 JSX 这种声明式的特性用在路由中？本文将很好地为你揭开这些疑惑。

Coding扣钉 - 玩转 React 服务器端渲染

React 之因此让服务器端渲染变成了一件有吸引力的事情，是由于它移除了服务器端对于浏览器环境的依赖，服务器端渲染除了要解决对浏览器环境的依赖，还要解决先后端能够共享代码和先后端路由能够统一处理这两个问题。本文选择了 Redux 和 react-router 来作说明。

更多阅读

简单的应用

React 第一阶段的学习完成，一块儿来看几个用 React 开发的项目。上面介绍的两个只是简单实例，而下面这三个，你能够认真研究一下，觉得下期的内容作好准备。

UXCore：一个兼容主流浏览器的 React PC 组件库

UXCore 是一个基于 React 的 PC UI 套件库，兼容 IE8+。

阿里巴巴信息平台是负责整个阿里巴巴集团智能办公系统的团队，涉及很是多的企业业务系统，包括薪酬、人力、财务、行政、IT 等等，在这些系统中产生了大量的表格、表单和图表的交互场景，这里面有不少重复配置的地方，也有不少定制变化的地方，目前业界的这一方面尚未可以彻底知足这一方面的解决方案，所以有了 UXCore。

项目地址：https://github.com/uxcore/uxcore

一言不合造轮子 - 撸一个 ReactTimePicker

这是一个独立 React 组件，已打包成 NPM 包，涉及到 React 开发、单页测试、Webpack 等内容。

项目地址：ecmadao / react-times | 演示地址：https://ecmadao.github.io/react-times

组件化可视化图表 - Recharts

Recharts 是一款可视化组件库，为基础表格的绘制提供了另一种可能。Recharts 含义是从新定义（Redefined）图表，这个名字的背后在于这个图表在设计上带给开发者的是不同的体验，不只是用 React 设计，也在于从新定义了组合与配置方式，代码更优雅，灵活可装卸。

目前版本是 0.15.1，支持 React 0.14.x 或 15.0.x 版本，如今有至少四个国外团队在产品中使用。

项目地址：recharts / recharts | 官网：http://recharts.org

专栏推荐

本期周刊特别增长专栏推荐，要深刻学习 React，他们的专栏是“绕不过的三座大山”：

题叶, JiyinYiyong - 题叶是社区内最先开始传播 React 的开发者，很是多的后来学习者都受到了他的影响，他在 React 和其余前端方方面面的思考，都值得去探讨
pure render - 由一群志同道合的开发者共同维护，分享关于 React 和 Flux 在实践中的经验与想法，篇篇精品
hepeguo 的专栏 - 对于 React 和 Redux 性能优化的深刻研究

（本期完，接下来两期，咱们将更深刻 React，对 Redux/Flux、组件、Virtual DOM、React Native 以及与 webpack 等相关的全部体系，全面地整理给你们。）

往期周刊传送门：

# SegmentFault 技术周刊 #

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

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