响应式系统和React2|青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第4天，关于响应式系统和React（3）（4）的知识点总结，包括：React的实现和React的状态管理库。

———Zy_Thomas

React(hooks)写法

import React, { useState } from 'react';

function Example () {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `Click ${count} times`;
  });
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count+1)}>
        click
      </button>
    </div>
  );
}

JSX基础使用

1. 定义虚拟DOM，不能使用“”（双引号）
2. 标签中混入JS表达式的时候使用{}
3. 样式的类名指定不要使用class，使用className
4. 不能有多个根标签，只能有一个跟标签
5. 标签必须闭合
6. 关于JS表达式和JS语句：

• JS表达式：返回一个值，可以放在任何一个需要值的地方 a ，a+b， demo(a)， function text(){}

• JS语句：if(){}， for(){} ，while(){} ，swith(){} ，不会返回一个值

React的实现

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

Problem 1：JSX不符合JS标准语法

解决方法：在编译之前，利用转译来将代码转译成符合JS标准语法的代码。 如下图，将左侧代码转译为右侧符合JS标准。

Problem 2：返回的JSX发生改变时，如何更新DOM？

使用differ的方式。

如何平衡：

• differ的规模尽可能小
• differ的速度尽可能快

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

How to differ?

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

React状态管理库

React状态库的核心思想

将状态抽离到 UI 外部统一进行处理

状态机： 当前状态，受到外部事件，状态改变。

React状态管理库——推荐

• redux
• xstate
• mobx
• recoil

应用级框架科普

1. next.js
2. modern.js
3. Blitz