React框架入门| 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 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算法是一种应用了如下规则的，通过比较新老节点是否有发生变化，从而做到只对部分节点进行更新，达到提高整体渲染效率的算法。