这是我参与「第四届青训营」笔记创作活动的第10天

响应式系统与 React

1.React的历史与应用

历史

2010年 Facebook 在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。
2011年Jordan Walke创造了FaxJS，也就是后来的React原型:
- 既可以在客户端渲染也可以在服务端渲染
- 响应式，当状态变更时，UI会自动更新。
- 性能好，快速渲染
- 高度封装组件，函数式声明，
2013年React 正式开源，在2013 JSConf 上 Jordan Walke介绍了这款全新的框架：React
2014年 - 今天生态大爆发，各种围绕React的新工具/新框架开始涌现

应用

前端应用开发，如 Facebook，Instagram，Netflix网页版。
移动原生应用开发，如Instagram，Discord，Oculus。
结合Electron，进行桌面应用开发。

2.React的设计思路

UI编程痛点

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

响应式与转换式

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

响应式编程

事件 ==> 执行既定的回调 ==> 状态变更 ==> UI更新

状态更新，UI自动更新。
- “状态更新，UI不会自动更新，需要手动地调用DOM 进行更新。”
前端代码组件化，可复用，可封装。
- “欠缺基本的代码层面的封装和隔离，代码层面没有组件化。”
状态之间的互相依赖关系，只需声明即可。
- “UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。”

组件化

image (24).png

image (25).png

组件一个是原子组件/或组件的组合
组件内部拥有状态，外部不可见
父组件可将状态传入组件内部，来控制子组件的运转。

状态归属问题

当前价格 属于Root结点！因为要向下传递，这其实不合理，在下面的状态管理库里会讲到这个的解决方法。

状态应该归属于两个节点（或多个）向上寻找到的最近共同祖先。

思考：

1.React是单向数据流,还是双向数据流?

答：单向的，永远是只有父组件给子组件传东西，但这并不代表子组件不能改变父组件的状态。

2.如何解决状态不合理上升的问题?

答：通过状态管理库，接下来也会讲到。

3.组件的状态改变后，如何更新DOM?

答：讲解React实现中会提到。

组件设计：

组件声明了状态和UI的映射
组件有Props（外部）/State（内部）两种属性
- Props接受父组件传入的状态
- State是内部的属性。
可被其他组件组成

生命周期

image (26).png

3.React (hooks)的写法

这段函数用来显示一个计数器，当点击按钮时，计数器的值就会自动增加

import React, {useState} from 'react';
function Example() {
    // 声明一个叫 “count” 的 state 变量。
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

下面这个组件在 React 更新 DOM 后会设置一个页面标题：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用浏览器的 API 更新页面标题
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

4.React的实现

JSX 是不符合JS标准的语法
返回的JSX改变时，如何更新DOM?
State/Props更新时，要重新触发render函数

Problem1

将JSX转换为符合JS语法的

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
// 等价于 
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Problem2

Virtual DOM （虚拟DOM）

Virtual DOM 是一种用于与真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构并可以和DOM建立一一对应的关系。

它赋予了React声明式的API:您告诉React希望让U是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

image (27).png

5.React状态管理库

核心思想

将状态抽离到U外部进行统一管理

image (28).png

状态机

收到外部事件后根据当前状态，迁移到下一个状态。

哪些状态适合放到状态管理库？

可能会被很多层级的组件用到的状态

6.应用级框架科普

Next.js - React 应用开发框架硅谷明星创业公司Vercel的 React开发框架,稳定,开发体验好，支持Unbundled Dev,sWC等,其同样有Serverless一键部署平台帮助开发者快速完成部署。口号是"Let’s Make Web Faster"
Modern.js - 现代 Web 工程体系 (modernjs.dev) 字节跳动Web Infra团队研发的全栈开发框架,内瓷了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。
Get Started with Blitz (blitzjs.com)无API思想的全栈开发框架,开发过程中无需写API 调用与CRUD逻辑,适合前后端紧密小团队项目。

响应式系统与 React | 青训营笔记