这是我参与「第五届青训营」伴学笔记创作活动的第 16 天

重点

UI编程痛点
组件化
状态归属问题

UI编程痛点

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

响应式系统

监听事件，消息驱动
监控系统
UI界面

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

转换式系统

给定输入求解输出
编译器
数值计算

组件化

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

状态归属问题

React是单向数据流
如何处理状态不合理提升
组件状态改变后，如何更新DOM

组件设计

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

React（Hooks）写法

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  return (
    <div><button onClick={()=> setCount(count+1)}>Click</button></div>
  )
}

React的实现

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

问题1

我们可以直接将react代码编译成js标准语法

问题2

我们可以使用虚拟DOM Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一-对应的关系。它赋予了React 声明式的API:您告诉React希望让UI是什么状态，React 就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

完美的最小Diff算法,需要O(n^3)的复杂度。牺牲理论最小Diff ,换取时间，得到了0 (n)复杂度的算法。

React状态管理

核心思想：将状态抽离到UI外部进行统一管理当前状态,收到外部事件,迁移到下一个状态

入门React | 青训营笔记

重点