响应式系统与 React | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 6 天。今日学习内容为：响应式

这是我参与「第五届青训营」伴学笔记创作活动的第 6 天。今日学习内容：响应式系统与 React

一、React历史与应用

React应用十分广泛：

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

二、React设计思路

首先，我们需要了解先前编程过程中的痛点，才能理解为何React需要如此设计

1. UI编程痛点

当我们通过单击事件修改当前值时，与当前值绑定的其他模块可能也需要发生相应的改变。在非响应式系统中比较复杂，需要一系列操作去更新UI界面，传导部分繁琐

从该案例中，可以看出原生UI的痛点包括：

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

2. 响应式与转换式

响应式基本要求：

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

3. 组件化

在上方给出的案例中，我们可以归纳出一棵树形结构：

总结而言，组件：

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

组件声明了状态和UI的映射，有Props/State两种状态，同时也可以由其他组件拼装而成

组件内部拥有私有状态State
组件接受外部的Props状态提供复用性
根据当前的State/Props，返回一个UI

4. 状态归属问题

我们需要考虑这样的几个问题：

React是单向数据流，还是双向数据流？
如何解决状态不合理上升的问题？
组件的状态更新后，如何更新DOM？

React是单向数据流；关于状态不合理上升，可以使用状态管理库工具；在React实现部分，来讨论如何更新DOM的问题

5. 生命周期

三、React（hooks）的写法

举个例子：

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

function Example() {
  // Declare a new state variable, which we'll call 'mount'
  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>
  )
}

两个基础的hooks用法：

useState：传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改
useEffect：传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行

有「副作用」的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其他的一些事情，比如网络请求，更新DOM，localStorage存储数据等

四、React的实现

React的实现过程中会遇到一些问题：

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

1. `JSX`不符合`JS`标准语法

对JSX语法进行转义

2. 返回的`JSX`发生改变时，如何更新DOM

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

它赋予了React声明式的API：告诉API希望UI是什么状态，React就确保DOM匹配该状态。这使得程序员可以从属性操作、事件处理和手动DOM更新中解放出来

如何进行Diffing？

五、React 状态管理库

核心思想：

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