前端随心记---------React简介(1)

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操作封装起来)。

原文地址:https://www.cnblogs.com/hudunyu/p/11575184.html

时间: 2024-10-10 06:27:59

前端随心记---------React简介(1)的相关文章

前端随心记---------vue和react的区别

React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件. 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库. 不同之处: 修改数据的方式. 模板渲染方式的不同. 组件通信的区别. Vuex 和 Redux 的区别. 监听数据变化的实现原理不同, Vue 通过 getter/setter 以及一些函数的劫持,能精确知道数据变化,不需要特别的优化就能达到很好的性能 Re

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

深拷贝与浅拷贝 在前端js里面的数据类型分为两大类: 1.基本数据类型(数据传递:值拷贝) var a = 12; var b = a; // 赋值操作,是把 a 地址里面对应的值赋值给了 变量b 所对应的地址空间. b = 24; a; // 不会受到影响 数据传递:值拷贝 2.复合数据类型(引用数据类型) var obj = {id: 1, username: 'andy', todos: ['吃饭', '睡觉']}; // 复合数据类型 var xiaoming = obj; // 复合数

前端随心记---------vuejs流行的UI框架

一:Element element ui框架的按钮组件,这款由饿了么前端开源的UI框架,一经面世,就收获大量程序员的芳心.在github 上更是高达29.8k的star早已说明一切.用于开发PC端的页面还是绰绰有余的.如果说你是用vue开发者,却没用过element UI,那你肯定不是合格的vue开发者. 文档地址:http://element-ui.cn 二:iview iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品.使用单文件的 Vue 组件化

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

react里面:state和prop的区别?setState为什么是异步的?组件传值有几种方式? 答:1.prop用于定义外部接口,state用于记录内部状态.2.prop的赋值在外部使用组件时,state的赋值在组建内部.3.组件不应该改变prop的值,但是state的存在目的是让组件来改变. 2.setState异步更新状态使得并发更新组件成为可能. 资料:https://segmentfault.com/a/1190000013040438?utm_source=tag-newest 3.

前端随心记(一)

前端 基础易错题(一) 案例一::介绍js原型链继承原理,以及prototype和--proto--的区别! 1.任何一个构造函数都有一个属性prototype叫做构造函数的原型,是一个对象,并且该对象默认情况下指向Object实例,constructor指向当前构造函数,--proto--指向Object.protopyte. 2.使用构造函数实例化的对象存在一个--proto--属性,指向当前构造函数的prototype. 3.当我们调用实例对象的属性和方法时,先在自身上面进行查找[自己身上

前端随心记---------vue3.0终于来了,作者已公布源码

Vue3.0 何去何从? 就在国庆的第五天,10月5日凌晨,web前端开发框架Vuejs的作者:尤雨溪在微博宣布Vue3.0版本终于要面正式推出了!  其实,在11月14日-16日于多伦多举办的 VueConf TO 2018 大会上,尤雨溪发表了名为 “ Vue 3.0 Updates ” 的主题演讲,对 Vue 3.0 的更新计划.方向进行了详细阐述. 1.更快 Virtual DOM 完全重写,mounting & patching 提速 100% : 更多编译时(compile-time

前端随心记---------简单.可扩展的状态管理工具MobX

Mobx是一个功能强大,上手非常容易的状态管理工具.就连redux的作者也曾经向大家推荐过它,在不少情况下你的确可以使用Mobx来替代掉redux. MobX: MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展.Mobx 就是一个集中化管理数据的库,类似之前学习的 vuex 和 redux. 为什么要使用它呢? 在单页项目中,实现组

前端随心记---------webpack管理工具

webpack: 官网:https://www.webpackjs.com/ 由来: 1.开发的时候,我们写的代码是有注释,有空格(文件比较大)在开发环境中注释有意义的,但是在生产环境中,注释是没有意义的.代码应该是尽可能压缩的足够小(网络请求)如果我们没有借助一些其他工具的时候,我们需要手工的把 xxx.js 转换 xxx.mini.js 文件.(文件美化) 2.我们的js在发展的过程中,出现很多的新特性,例如 es6 箭头函数.class 语法糖,Promise等.这些新的特性在不做处理的时

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

一.jQuery  ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} }); 传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱. JQuery ajax 是对原生