React | 青训营笔记

strange
71 阅读3分钟

这是我参与「第五届青训营」笔记创作活动的第9天.今天学习React的历史以及设计思路.

React 的历史与应用

react可以实现:

  1. 前端应用开发, 如Facebook, Instagram.
  2. 移动原生应用开发.
  3. 结合 Electron 的桌面应用开发.

react的发展历程:

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

2011年Jordan Walke创造了FaxJS，也就是后来的 React 原型。 FaxJS具有四个特性, 既可以在客户端渲染也可以在服务端渲染, 是响应式的(随状态变更而更新UI), 性能好, 结构化(组件级别, 函数式声明)

2013年 React 正式开源，在 2013 JSConf 上 Jordan Walke 介绍了这款全新的框架; 可以认为react是一个JavaScript的library.

React 的设计思路

UI 编程痛点

使用JavaScript写UI会有以下几个缺点

  1. 状态更新，UI不会自动更新，需要手动地调用DOM进行更新。

  2. 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。

  3. UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。 UI编程的一个主要特点就是具有数据依赖关系. 多个callback层层调用是不希望看见的.

响应式与转换式

image-20230130104732453.png

编译器, 算法实现等属于转换式系统, 给定输入求输出的问题.

UI界面是一个响应式系统, 需要监听事件, 当事件发生后要做一件事情. 前端UI可以用以下四个步骤描述

image-20230130105005994.png

React 设计与实现

组件化

那么针对1中提到的3个缺点, 具体的解决思路如下

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

声明状态之间的依赖关系, 例如, 我们需要求c=a+b, 那么声明这个函数依赖关系后, 随着a,b的状态发生改变, c的值也会改变.

对前端界面作语义化的组件分离. 将界面中的内容划分成类似于DOM树的形式,

image-20230130110052168.png

并且满足以下三个条件.

  1. 组件是组件的组合/原子组件
  2. 组件内拥有状态，外部不可见
  3. 父组件可将状态传入组件内部

当两个组件需要共享一个状态的时候, 需要把共享的状态上移. 状态归属于两个节点向上寻找到最近的祖宗节点.

状态归属问题

从root节点把函数向下传, 直到onclick调用函数, 从而改变root的状态.

注意 ：React是单向数据流, 只能是父组件给子组件传东西, 但是子组件可以通过函数改变父组件状态.

组件设计要满足以下条件：

  1. 组件声明了状态和U的映射。
  2. 组件有Props/State两种状态。
  3. “组件”可由其他组件拼装而成。

组件内部有自己的状态(State), 父组件可以给子组件传状态(Props).

组件代码框架

  1. 组件内部拥有私有状态 State。
  2. 组件接受外部的Props状态提供复用性。
  3. 根据当前的State/Props，返回一个Ul。
avatar
文章
阅读
粉丝