响应式系统与React | 青训营

阿菇kinoko
78 阅读3分钟

React 历史与应用

  • 前端应用开发，如 Netflix
  • 移动原生应用开发，如 Discord
  • 桌面应用开发，结合 Electron

2010 年，Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了 组合式组件 的思想，🌟启发了 React 的设计。

2011 年，J Walke 创造了 FaxJS，即 React 的原型。

  • Seamless Client Server Render
    • 既可在服务端渲染，也可在客户端渲染
  • Reactive
    • state 状态更新，UI 随即变化
  • Performant
    • 性能优化
  • Structural
    • 组件封装，函数声明

2012 年，Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用，J Walke 基于 FaxJS 的经验，创造了 React。

2013 年，JSConfUS 中，React 正式开源。 👋 Youtube 相关视频

2014 年至今，React 生态爆发。

React 设计思路

原生 JavaScript UI 痛点

在原生 JavaScript UI 编程的一些😰痛点：

  • 状态更新，UI 不会自动更新，需要手动调用 DOM 进行更新。
  • 欠缺基本的代码层面的封装与隔离，代码层面没有组件化。
  • UI 之间的数据依赖关系需要手动维护，若依赖链路过长，会遭遇 回调地狱（Callback Hell）。

转换式与响应式

  • 转换式
    • 给定输入，求解输出
    • 编译器
    • 数值计算
  • 响应式
    • 监听事件，消息驱动
    • 监控系统
    • UI 界面

转换式的特点决定了其天生 👊不适合 用于 UI。

基于前面原生 JavaScript 的痛点和对响应式变成的需求，因此，我们有了一些 🪭期望：

  • 状态更新，UI 自动更新
  • 前端代码组件化，可复用，可封装
  • 状态之间的互相依赖关系，只需声明即可

组件化

  • 组件是组件的组合 => 原子组件
  • 组件内拥有状态，外部不可见
  • 父组件可将状态传入组件内部 => 父组件控制组件

组件设计要满足的需求：

  • 组件声明了状态和 UI 的映射
  • 组件有 Props/State 两种状态
  • 组件可由其它组件拼接而成

状态归属

通过对具体案例的分析，可以引发一些 🤔思考：

  • React 是单向数据流，还是双向数据流？
    • 单向数据流，只能 父 => 子
  • 如何解决状态不合理上升的问题？
  • 组件的状态改变后，如何更新 DOM？

JavaScript 中，函数是「一等公民」

生命周期

用一张图就能看清楚：

图片.png

React（hooks）的写法

网课主要是实例讲解，不方便全部记下来，直接去看官方文档吧！ 📒 React Hooks

React 状态管理库

一味的提升状态，可能会使其调用链路过长，是代码变得臃肿不堪。

核心思想：将状态抽离到 UI 外部进行统一管理。

一些常见的 React 状态管理库：

其它的一些东西

JSConfUS 2013

What is JSConf 🤔

JSCONF is a JavaScript organization that organizes conference events throughout the year related to technologies developed on top of JavaScript.

Speakers from all over the world are invited to talk about their innovative creations and show how they managed to empower JavaScript  in their solutions.

Antoine Hage, one of our co-founders introduced SOAJS during one of these conferences.

He showed SOAJS in action and for that particular event, he used examples found in one of the public repos soajs.jsconf.

在这次会议上，React 横空出世。

图片.png

J Walker 明确地指出，React 是一个 JavaScript library for building user interfaces（构建用户界面的 JavaScript 库），具备以下特点：

  • Daclaring Components
  • No observable data binding
  • Embedded XML Synatax => JSX
    • very lightweight transform 将标签转化为函数调用（并不美观）
  • Custom Components

React 不是一个面向对象的框架。

React 和 JSX 都是 以 JavaScript 为核心，核心目的之一是 描述在任何时间点的视图。

avatar
文章
阅读
粉丝