响应式系统与React学习笔记 ｜ 青训营笔记

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

响应式系统

组合式组件：函数声明

响应式：转台变化后，不用手动修改dom

原生JavaScript写UI的痛点

1. 不会自动更新，需要手动调用DOM
2. 代码层面没有组件化
3. UI之间的数据依赖需要手动维护

转换式系统：给定输入，求输出

响应式系统：监听事件，消息驱动

graph TD

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

React的设计与实现

1. 状态更新，UI自动更新
2. 前端代码组件化，可复用、封装
3. 状态之间的相互依赖关系，只需要声明

（代码梳理树）整个页面视为root

左边的不是dom树，不是js的变量

当前价格只能属于root节点（因为只有父组件可以控制子组件）

为了解决状态上升问题，可以使用状态管理库

总结：

1. 组件是组件的组合
2. 组件内拥有状态，外部不可见
3. 父组件可将状态传入组件内部

组件设计：

1. 组件声明了状态和UI的映射
2. 组件有Props和State两种状态
3. 组件可由其他组件拼装而成

Props 为外部传入的，State 内部

hooks的写法

在循环和嵌套结构中不能使用

useState：传入初始值，返回一个状态，和set该状态的函数

useEffect：传入一个函数和数组，数组是状态的数组，称作依赖项

import React, {useState} from 'react';

function Example(){
    const [count, setCount] = useState(0);
    
    return(
    <div>
        <p> You clicked {count} times </p>
        <button onClick = {() => setCount(count + 1)}>
            CLick me
        </button>
    </div>
    );
}

React的实现

转译而不是编译

html本质上是树状结构

指令式编程：步骤详细说

声明式编程：指出事件

自己式编程：自己响应自己

虚拟DOM是一种用于和真实DOM同步，而在JS内存中维护的对象。