前言

课程重点：

• React的历史
• React的设计思路
• React的实现原理
• React的状态管理库
• 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算法是一种应用了如下规则的，通过比较新老节点是否有发生变化，从而做到只对部分节点进行更新，达到提高整体渲染效率的算法。