react框架什么时候出来的

青灯夜游

发布时间：2022-12-05 17:36:04

3037人浏览过

来源于php中文网

原创

react框架是2013年出来的；React起源于Facebook的内部项目，于2013年5月开源。React是用于构建用户界面的JavaScript库，主要用于构建UI；用户可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

react框架什么时候出来的

本教程操作环境：Windows7系统、react18版、Dell G3电脑。

一、React的起源和发展

React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

二、React的出发点

基于HTML的前端界面开发正变得越来越复杂，其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。而来自Fackbook的React框架正是完全面向此问题的一个解决方案，按官网描述，其出发点为：用于开发数据不断变化的大型应用程序(Building large applications with data that changes over time)。相比传统型的前端开发,React开辟了一个相当于相当另类的途径，实现了前端界面的高性能高效率开发。

React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

三、Recat与传统MVC的关系

轻量级的视图层库！ A JavaScript library for building user interfaces

React不是一个完整的MVC框架，最多可以认为是MVC中的（view）层，甚至React并不非常认可MVC开发模式；React构建页面UI的库。可以简单地理解为，React将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套、就成了我们的页面

四、React高性能的体现：虚拟DOM

原理：在我们的开发过程中，我们需要将变化莫测的数据实时的反映到UI上，这时就需要对DOM进行操作。但频繁或复杂的操控DOM会产生许多性能上的问题。————如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技术的重要指标。

React为此引入了虚拟DOM(virtual DOM)的机制：在浏览器端用javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新渲染整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的的区别，然后仅仅需要变化的部分进行实际的浏览器DOM更新。而且React能够批量处理虚拟DOM的刷新，在一个事件循环（Event loop）内的两次数据变化被合并，例如你连续的先将节点内容从A-B,B-A，React会认为A变成B，然后又从B变成A UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的

React Fiber：

在React16之后发布的一种react核心算法，React Fiber是对核心算法的一次重新实现(官网说法)。之前用的是diff算法

在之前的React中，更新过程是同步的，这可能会导致性能问题。

当React决定要加载或者更新组件树时，会做很多事，比如调用各个组件的生命周期函数，计算和比对Virtual DOM，最后更新DOM树，这整个过程是同步进行的，也就是说只要一个加载或者更新过程开始，中途不会中断。因为javascript单线程的特点，如果组件树很大的时候，每个同步任务耗时太长，就会出现卡顿。

魔法映像企业网站管理系统

技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作

下载

React Fiber的方法其实很简单——分片。把一个耗时长的任务分成很多小片，每一个小片的运作时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会。

五、React的特点和优势

1、虚拟DOM

我们之前操作DOM的方式是通过document.getElementById()的方式，这样的过程实际上是先去读取html的dom结构，将结构转换成变量，而进行操作

而reactjs定义了一套变量形式的dom模型，一切操作和换算直接在变量中，这样减少了操作真实dom，性能真实相当的高，和主流MVC框架有什么本质区别，并不和dom打交道

2、组件系统

react最核心的思想是将页面中任何一个区域或者元素都可以看做一个组件component

那什么是组件呢？

组件指的就是同时包含了html、css、js、image元素的聚合体

3、单向数据流

其实reactjs的核心内容就是数据绑定，所谓数据绑定指的是只要将一些服务端的数据和前端页面绑定好，开发者只关注实现业务就行了

4、JSX语法

在vue中，我们使用render函数来构建组件的dom构造性能较高，因为省去了查找和编译模板的过程，但是在render中利用createElement创建结构的时候代码可读性较低，较为负载，此时可以利用JSX语法来在render中创建dom，解决了这个问题，但是前提是需要使用工具编译jsx

【相关推荐：Redis视频教程、编程视频】

2024前端面试题目 2024年最新前端面试题汇总大全

2024前端面试题浅到深

2024前端面试题及答案

2024前端面试题高频

Angular与React：2024年前端选择哪个

相关专题

线程和进程的区别

线程和进程的区别：线程是进程的一部分，用于实现并发和并行操作，而线程共享进程的资源，通信更方便快捷，切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

502

2023.08.10

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

513

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

244

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

298

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

5306

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

481

2023.09.01

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

212

2023.09.04

Js中concat和push的区别

Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。

218

2023.09.14

Python 自然语言处理（NLP）基础与实战

本专题系统讲解 Python 在自然语言处理（NLP）领域的基础方法与实战应用，涵盖文本预处理（分词、去停用词）、词性标注、命名实体识别、关键词提取、情感分析，以及常用 NLP 库（NLTK、spaCy）的核心用法。通过真实文本案例，帮助学习者掌握使用 Python 进行文本分析与语言数据处理的完整流程，适用于内容分析、舆情监测与智能文本应用场景。

2026.01.27

热门下载

网站特效

网站源码

网站素材

前端模板