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

响应式系统与React

前置知识

HTML,CSS,JS基础。
基础的数据结构/算法知识，如二叉树，深度遍历。
会使用浏览器提供的DOM API 来修改DOM,更新UI。

React的历史与应用

2013年正式开源，React---A JavaScript library

2014-今天生态大爆发，各种围绕React的新工具/新框架开始涌现

React的设计思路

UI编程痛点

任何一种配置的改变都可能会改变当前手机的价格。

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

响应式与转换式

响应式系统

事件---->执行既定的回调----->状态变更

前端UI

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

响应式编程

- 状态更新，UI自动更新。

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

前端代码组件化，可复用，可封装。

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

状态之间的互相依赖关系，只需声明即可。

~~UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。~~

组件化

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

状态归属问题

状态归属于两个节点向上寻找到最近的祖宗节点。

组件设计

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

React(hooks)的写法

useState

useState 是一个 Hook（我们将在稍后讨论这意味着什么）。我们在函数组件中调用它来向它添加一些本地 state(状态) 。 React 将在重新渲染之间保留此 state(状态) 。 useState 返回一对：current state(状态)值和一个允许你更新它的函数。您可以从事件处理程序或其他位置调用此函数。它类似于类中的 this.setState ，除了它不会将旧 state(状态) 和新 state(状态) 合并在一起。（我们将在使用 State(状态) Hook 中显示一个 useState 与 this.state 进行比较的示例。）

useEffect 首先了解什么是副作用(Side Effect)：副作用(Side Effect)是指函数或者表达式的行为依赖于外部世界。具体可参照Wiki上的定义，副作用是指：

函数或者表达式修改了它的 scope 之外的状态
函数或者表达式除了返回语句外还与外部世界或者它所调用的函数有明显的交互行为

Effect Hook 为你的函数式组件增添了执行 side effects 的能力。

import { useState, useEffect } from 'react';

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

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

这段代码段基于上一页的计数器示例，但我们为其添加了一项新功能：我们将文档标题设置为包含点击次数的自定义消息。

数据获取、设置订阅以及手动更改 React 组件中的 DOM 都是 side effects 的例子。不管您是否习惯调用这些操作 side effects (或仅仅是 effect )，但你可能在以前的组件中执行过这些操作。

提示

如果您熟悉 React 类生命周期方法，则可以将 useEffect Hook 视为 componentDidMount，componentDidUpdate 和 componentWillUnmount 的组合。

React的实现

Problems

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

Problem 1:

Transpile 转译：例如：把C++ 转为JavaScript

Problem 2:

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

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

更新次数少 <---Tradeoff---> 计算速度快

完美的最小Diff算法，需要O(n的3次方)。

牺牲理论最小Diff，换取时间，得到了O(n)复杂度的算法:

Heuristic O(n) Algorithm


不同类型的元素	替换
同类型的DOM元素	更新
同类型的组件元素	递归

指令式编程：C，C++等。

声明式编程：React Vue等前端框架，发出指令自动执行，不用做更底层的事。

响应式编程：不仅可以直接声明UI,又响应，当某个状态改变时，又可以更改其他依赖的状态，可以自动更新UI，自己响应自己。

React状态管理库

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

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