React框架入门| 青训营笔记

14 阅读2分钟

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

前言

课程重点:

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。分别对应着组件的挂载、更新和卸载三个阶段。

image.png

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的快速更新。

image.png

diff算法是一种应用了如下规则的,通过比较新老节点是否有发生变化,从而做到只对部分节点进行更新,达到提高整体渲染效率的算法。

image.png