前端随心记---------React简介

Posted hudunyu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端随心记---------React简介相关的知识,希望对你有一定的参考价值。

React 简介:

React 是一个用于构建用户界面的 javascript 库。

React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。

React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。

React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

 

React诞生的原因

  主要是当时市面上的这些框架都无法满足 facebook 公司的业务需求 (1. 数据量很大,数据不好管理 2. 页面DOM结构不能好复用)

facebook 内部工程师 想办法去解决这些需求,通过努力,找到解决方案,开源了 react。

 

笔试题: 谈谈react最显著的特点?

1.flux 统一管理数据的思想(高阶)

2.虚拟DOM概念(virtual DOM):使用js对象的方式去描述一个真实的DOM元素,在后面数据变化后,让生成的新的虚拟DOM和旧的虚拟DOM,是 diff 算法进行比较,得出差异(patch),然后把 patch 更新到页面上。

3.组件化:可以复用的代码提取出来,形成一个单独的结构。(1. 结构html标签 2. 样式 3. 形成 4. 数据state)

 

附:

首次引入虚拟DOM 概念(主要的原因是,在前端没有引入MVC概念的时候,在jQuery存在的哪个年代,大家都是DOM操作,通过DOM监听,DOM选取操作,如果操作量不大,也不会产生太大的问题,但是业务一旦复杂,数据量多,则这个时候如果继续DOM操作,还是很消耗性能,浏览器的底层是做渲染和重绘是很消耗性能,我们应该尽可能减少重绘。主要的原因是因为在开发的时候,有的时候,只有部分的数据发生变化,其实页面上主要的DOM结构还没有太大的变化,很多的DOM都可以复用)Facebook的工程师引入 虚拟DOM(使用javascript对象的方式去描述一个DOM结构,然后通过diff算法去比较新的虚拟DOM和旧的虚拟DOM,得出区别(patch 补丁) snabbDOM h函数 patch)。 注意:由于虚拟DOM的引入使得页面的加载性能得到显著的提升,以至于后面的一些其他的MVVM框架,都引入虚拟DOM的概念。例如 vuejs 就是借鉴了 react 里面的 虚拟DOM(virtual DOM)注意: 虚拟DOM的概念是Facebook的工程师想出来的。但是 底层 diff 算法不是Facebook首创,很早有了 diff 算法。

 

React解决了什么问题?

1. 数据统一管理 2. 性能提升 3. 代码复用

 

jsx语法

什么是jsx语法?

        jsx 翻译过来就是 javascript + xml。说白了就是允许开发者可以在 js 语境下直接写 html 代码(标签),不需要使用引号包裹。

为什么引入jsx语法?

 答:我们react引入虚拟DOM,但是使用react原生的  api 实现虚拟DOM,太麻烦了 React.CreateElement(tagName, tagAttr, tagContent)。 引入一种新的语法 jsx(javascript + xml) 说白了:可以在js语境下写 html 代码(其底层的原因是使用webpack调用babel 进行转换)。我们把jsx语法写的代码,称之为:jsx元素,jsx代码,react元素。

  jsx好处:方便开发者。

参考网址:https://zh-hans.reactjs.org/docs/introducing-jsx.html

 

库和框架有什么区别?(谈谈库和框架之间的区别?)

            jquery 这个是一个库;vuejs 是一个框架。 简单:库只是一个工具集合(里面封装很多的好用的函数、方法)。框架是一套成熟的解决方案(框架里面可以组织很多的库)。 vuejs 数据驱动,没有DOM操作(vuejs底层还是要DOM操作,尤大大把底层DOM操作封装起来)。

 

 

 

 

 

 

 

 

 

以上是关于前端随心记---------React简介的主要内容,如果未能解决你的问题,请参考以下文章

前端随心记---------前海面试汇总

前端随心记

前端随心记---------函数

前端随心记---------Axios/fetch/ajax的区别

前端随心记---------云计算

前端随心记---------深拷贝与浅拷贝