前端技术巡礼-你不知道的React

本周在虎扑前端团队周分享时 分享了一期关于React的内容,在本文记录一下进行分享

一、Before React

图片2.png
盘古时代,桌面应用 客户端服务器
石器时代,互联网开始发展网站设计(静态)
青铜时代,yui、prototype、extjs、dojo等等框架的时代,
黑铁时代,jquery和jquery的一堆衍生品jqueryui、easyui、ligerui等
白银时代,angularjs、react,vue
黄金时代,前端技术和后端平起平坐的时代 跨平台开发

在React出现之前的现代前端开发中,基于MVC设计思想的angular是前端开发中大哥,在快速开发大型 Web 项目上很受推崇

在使用angular开发过程中:

  • 多数的用户请求都包含一定成分的展现逻辑和一定成分的业务逻辑,两种逻辑揉合在一个请求里,在处理的时候,view与controller很难合理地分工。
  • 传统MVC可能在非常巨大的代码库和庞大的组织面前,可能会变得过于复杂,每当需要添加一项新功能或者特性时,系统的复杂就成级数的增长,致使代码变得脆弱而不可预测
    图片3.png

二、What's React

当系统中有很多模型和相应的视图时,其复杂度就会迅速扩大,非常难以理解和调试,特别是模型和视图可能存在双向数据流动。

Facebook在这种状况下决定开发一种新型框架,以解决这种问题。Facebook使用了React+Flux进行构建,发现它用的还不错,所以在后续进行了开源,通过社区和官方维护迭代,一直发展至今。

那么,React到底是什么呢?

A declarative, efficient, and flexible JavaScript library for building user interfaces.

单纯的React只是一个UI library,但是凭借它丰富的生态系统,它的量级就会从库跨越到框架层面。

React兴起的同时正好是ES6开始普及的时候,它彻底主导了前端开发,让模块化JavaScript加各种打包方案成为绝对主流,“彻底”干掉了旧的html + jQuery工作流。

深入了解React之前,还是需要明确一下,什么是Flux?

它是一种开发模式/思想 推进应用中的数据单向流动

When application start:

  • Store 告知 Dispatcher 只要有 action 产生就通知它
  • Controller View 从 Store 中获取最新的 state
  • 当 Controller View 接到来自 store 的 state,就将其传递给它所管辖的子 View 去渲染
  • Controller View 同时让 store 在 state 变化的时候通知自己

When action start (数据流)

  • Controller View 同时让 store 在 state 变化的时候通知自己
  • Action Creator 做好 action 并将其发送给 Dispatcher
  • Dispatcher 按照顺序将 action 传递给 store。每一个 store 都会受到所有的 action 通知,然后自行觉得是否对这个 action 做出响应,更新 state
  • 一旦 store 更新 state 完毕,就会告知订阅了该 store 的 controller view
  • 这些 controller view 就会向 store 请求更新了的 state
  • 从 store 中获得 state 之后,view controller 将会让它所管辖的子 view 渲染新的 state

对Flux进行一下总结

通过应用的数据流是一个方向,没有两边绑定(two-way bingding:Angular.js有此方式),应用状态在存储中维护,允许应用不同部分保持解耦,在存储之间发生依赖的地方,它们能够保持严格的层次关系(设计原则:尽量松耦合,无法回避的就变成树形层次结构),同步管理由dispatcher负责。

当用户进行操作的时候,会从组件发出一个 action,这个 action 流到 store 里面,触发 store 对状态进行改动,然后 store 又触发组件基于新的状态重新渲染。
图片4.png 图片5.png

Facebook: MVC Does Not Scale, Use Flux Instead

重新回到React

Web Components

  • 搭积木
  • 高度拆分
  • 低耦合

State Machine

  • dom操作 => data操作
  • 操作维度更专注
  • 完善的生命周期函数

JSX

  • 别具一格的设计思想,React认为通过将代码分离为 HTML、JavaScript 和 CSS 来跨越技术边界的方法并没有实质性的效果。为了创建具有高内聚和低耦合的程序,最好将 UI 的呈现、行为和状态放在一个 JavaScript 文件里。
  • X本质:语法糖

15_14_26__06_24_2019.jpg

React's Tech

Virtual DOM

  • 开销不比真实DOM小,看似复杂但是更高效
  • 用JS模拟真实DOM
  • DOM层的变化由JS接管
  • 重绘性能更高
  • 项目越复杂,影响越巨大

diff 算法

  • 不推倒重来,只关注需要更新的东西
  • 核心就是 createElement 和 updateChildren
  • 过程:

    • patch(container, vnode)

      初始化加载,直接将 vnode 节点打包渲染到一个空的容器 container 中
    • createElement 创建元素

      修改发生之后:patch(vnode, newVnode)
      数据改变后,patch对比老数据 vnode 和新数据 newVnode
    • updateChildren 找出区别之后对发生改变的内容进行更新
      Try:https://github.com/snabbdom/snabbdom

图片6.png

三、Better?

  • 和其他主流框架对比
    图片7.png
  • React的评价走向

    • 态势平稳
    • 上升趋势
    • 受欢迎程度高
      图片8.png
  • Connections Between Technologies

    • React和其他技术有较强的接入性
    • 使用React的群体对其他技术的使用更广
      图片9.png
  • 大家喜欢它的主要原因
    图片10.png

四、React Ecosystem

React成为优秀的技术选型对象,注定需要完善的生态支持。

  • ReactJs
  • JSX
  • NPM
  • ES6+
  • Babel
  • JS模块化开发:

    • CDN-Based
    • AMD
    • CommonJs
    • CMD
    • UMd
    • ES6 Module
  • Webpack/Gulp
  • ESLint
  • React Router
  • Flux/Redux
    State Manager
    Redux: Flux-like 更优雅的作法
  • React Native
  • GraphQL
    FaceBook出品
  • The React Developer Tools
    图片11.png

UI构建:


1 + 3 =

得之太易者必不受珍惜。唯有付出代价,万物始有价值。