• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

怎么描述react框架?

react 搞代码 4年前 (2021-12-28) 32次浏览 已收录 0个评论

React是一个Facebook开源的JavaScript框架,用于构建“可预期的”和“声明式的”We来源gaodaima#com搞(代@码网b用户界面,它已经使Facebook更快地开发Web应用。

React生态:React+React-Router+Redux+Axios+Babel+Webpack

特点:

  • Declarative(声明式编码)

  • Component-Based(组件化编码)

  • Learn Once, Write Anywhere(支持客户端与服务器渲染)

  • 高效(高效的DOM Diff算法,最小化页面重绘)

  • 单向数据流(父组件只能将数据一层逐步往子组件传递,子组件向父组件也是只能一层层的往传递数据)

  • 声明式编程:只关注做什么, 而不关注怎么做(流程), 类似于填空题,命令式编程:要关注做什么和怎么做(流程), 类似于问答题

另外还有以下注意点:

  • React不是一个MVC框架

  • React不使用模板

  • 响应式更新非常简单

React高效的原因

  • 虚拟(virtual)DOM, 不总是直接操作DOM(批量更新, 减少更新的次数)

  • 高效的DOM Diff算法, 最小化页面重绘(减小页面更新的区域)

主要原理

传统的web应用,操作DOM一般是直接更新操作的,但是我们知道DOM更新通常是比较昂贵的。而React为了尽可能减少对DOM的操作,提供了一种不同的而又强大的方式来更新DOM,代替直接的DOM操作。就是Virtual DOM,一个轻量级的虚拟的DOM,就是React抽象出来的一个对象,描述dom应该什么样子的,应该如何呈现。通过这个Virtual DOM去更新真实的DOM,由这个Virtual DOM管理真实DOM的更新。

为什么通过这多一层的Virtual DOM操作就能更快呢? 这是因为React有个diff算法,更新Virtual DOM并不保证马上影响真实的DOM,React会等到事件循环结束,然后利用这个diff算法,通过当前新的dom表述与之前的作比较,计算出最小的步骤更新真实的DOM。

React的特点和优势

虚拟DOM 我们以前操作dom的方式是通过document.getElementById()的方式,这样的过程实际上是先去读取html的dom结构,将结构转换成变量,再进行操作 而reactjs定义了一套变量形式的dom模型,一切操作和换算直接在变量中,这样减少了操作真实dom,性能真实相当的高,和主流MVC框架有本质的区别,并不和dom打交道

组件系统 react最核心的思想是将页面中任何一个区域或者元素都可以看做一个组件 component 那么什么是组件呢? 组件指的就是同时包含了html、css、js、image元素的聚合体使用react开发的核心就是将页面拆分成若干个组件,并且react一个组件中同时耦合了css、js、image,这种模式整个颠覆了过去的传统的方式

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

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

更多React相关技术文章,请访问gaodaima搞代码网进行学习!

以上就是怎么描述react框架?的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:怎么描述react框架?

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址