react 入门理论学习

朴灿烈づ我的快乐病毒、 2022-11-19 04:07 89阅读 0赞

# react 入门理论学习 #

#### 1、概念 ####

> React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC框架，都不满意，就决定自己写一套，用来架设他们自己的 Instagram的网站。做出来以后，发现这套东西很好用，在2013年5月开源了。目前已经成为前端的三大主流框架。

#### 2、React是什么? ####

> React是用于构建用户界面的JavaScript 库，围绕React的技术栈主要包括：React, redux, react-redux,react-router, 等等。

#### 3、特点 ####

> 1、使用JSX语法创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门;  
> 2、性能高：通过 diff算法 和 虚拟DOM实现视图的高效渲染和更新;  
> 。。。。。后续补充

#### 4、React核心 ####

1、虚拟DOM

> React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率。

> 为什么用虚拟DOM?  
> 当DOM发生更改时需要遍历DOM对象的属性, 而原生DOM可遍历属性多达200多个, 而且大部分属性与渲染无关,导致更新页面代价太大。

> 虚拟DOM的处理方式？  
> 1、用 JS对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中。  
> 2、当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异。  
> 3、把记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。

> 原理剖析  
> Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU和硬盘，硬盘读取速度比较慢，我们会就在它们之间加缓存条; 反之, 既然 DOM 运行速度慢，那么我们就在JS 和 DOM 之间加个缓存。JS只操作Virtual DOM，最后的时候再把变更的结果写入DOM。

2、Diff算法

> 当我们使用React在render() 函数创建了一棵React元素树，在下一个state或者props更新的时候，render() 函数将会创建一棵新的React元素树。React将对比这两棵树的不同之处，计算出如何高效的更新UI（只更新变化的地方），此处所采用的算法就是diff算法。

> diff算法处理DOM的方式  
> a) 如果两棵树的根元素类型不同，React会销毁旧树，创建新树。（当根节点不同就，创建新树，销毁旧树）  
> b) 对于类型相同的React DOM 元素，React会对比两者的属性是否相同，只更新不同的属性;  
> 当处理完这个DOM节点，React就会递归处理子节点。（当元素类型相同时，只更改不同的属性）
> 
> c) 遍历插入元素, 如果没有key,React将改变每一个子删除重新创建; 为了解决这个问题，React提供了一个 key属性。当子节点带有key属性，React会通过key来匹配原始树和后来的树。（当遍历插入相同类型的元素时，需要给每一个元素添加一个唯一标识的key值）  
> d) 通过绑定key, React就知道带有key ‘1024’ 的元素是新的，对于 ‘1025’ 和 ‘1026’ 仅仅移动位置即可。

key使用的时候注意:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDM0Mg_size_16_color_FFFFFF_t_70_pic_center]

#### 5、生命周期 ####

生命周期阶段划分：初始化阶段、更新阶段、卸载阶段、错误处理

1、图例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDM0Mg_size_16_color_FFFFFF_t_70_pic_center 1]

2、初始化阶段：

constructor()
    创建对象初始化state
    componentWillMount()
    组件即将被渲染，产生改回调
    render()
    组件被渲染，产生改回调
    componentDidMount()
    组件渲染完成，产生改回调

3、更新阶段

componentWillUpdate()
    组件即将更新，产生改回调
    render()
    组件更新，产生改回调
    componentDidUpdate()
    组件更新完成，产生改回调

4、卸载阶段

componentWillUnmount()

5、异常处理

componentDidCatch()

6、组件运作流程  
1、首次初始化渲染: React.render()

2、组件每次发生更新: state: this.setState(\{\})

componentWillUpdate()
    组件即将更新，产生改回调
    render()
    组件更新，产生改回调
    componentDidUpdate()
    组件更新完成，产生改回调

3、卸载阶段

componentWillUnmount()
    //组件即将被移除，产生该回调
    
    注意：移除组件 ReactDOM.unmountComponentAtNode(container)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDM0Mg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/bb6aac7d7a6d479b896f149fa281b13e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDM0Mg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/90d18aab92114631b4c0149809f68f18.png