这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
前言
课程重点:
1.React的历史 2.React的设计思路 3.React的实现原理 4.React的状态管理库 5.React应用级框架科普
React 的设计思路
1.传统JavaScript更新UI的痛点 状态更新,UI不会自动更新。需要手动的调用DOM函数进行更新 缺少基本层面代码的封装和隔离,代码层面没有组件化 UI之间的数据依赖关系,需要手动维护
2.我们对UI代码的需求 状态更新,UI自动更新 前端代码组件化,可复用,可封装 声明式的状态依赖关系
3.组件
(1)组件定义
组件是组件的组合/原子组件 组件内部拥有的状态,外部不可见 父组件可以将状态传递给子组件
(2)组件设计
组件声明了状态和UI的映射 组件有Props和State两种状态 组件可由其他组件拼装而成
(3)组件结构
组件内部拥有私有状态State 组件接收外部的Props状态提供复用性 根据当前的State和Props返回UI
4.React的生命周期
React的生命周期主要有三个阶段,即Mounting、Updating和UnMounting。分别对应着组件的挂载、更新和卸载三个阶段。
React的基本语法
1.JSX
React的模板语法使用的是一种叫做JSX的语法,基本形式如下:
import React, {useState} from 'react';
function Example {
const [count, setCount] = useState(0);
return (
<div>
<p>点击了{ count }次</p>
<button onClick={ () => setCount(count+1)}>点击</button>
</div>
)
}
React的实现
1.虚拟DOM
虚拟DOM就是一种将真实HTML元素,转换成JS对象表示形式的JS对象,它具有和DOM一样的树形结构,并且可以和真实DOM建立一一对应的关系。
2.响应数据的实现
React的响应式数据的实现方式是在发布订阅模式的基础上,应用diff算法实现虚拟DOM的快速更新。
diff算法是一种应用了如下规则的,通过比较新老节点是否有发生变化,从而做到只对部分节点进行更新,达到提高整体渲染效率的算法。