热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

React入门(一):WhyReact

在正式学习React之前,我们必须知道React的特性以及它是否真的适合我们,必须弄明白,为什么我们选择用React开发项目而不是Vue或

在正式学习 React 之前,我们必须知道 React 的特性以及它是否真的适合我们,必须弄明白,为什么我们选择用 React 开发项目而不是 Vue 或者 Angular。接下来我就简单地说一说 React 的特性以及优缺点。

1、声明式开发:像原生的 JS 和 JQuery 那样频繁对 DOM 进行操作的开发方式称之为命令式开发。而 React 颠覆了这一方式,React 中几乎没有对 DOM 的直接操作,而是通过操作数据,当元素的状态发生改变时,React 会自动渲染,相当于自动帮你进行了 DOM 操作,大大地提升了开发效率。

2、JSX(Javascript XML):JSX 是一种Javascript的语法扩展,其表现形式为JS与HTML的混合使用。JSX 会被 Babel 编译为Javascript,且在编译过程中就能够发现错误,所以安全性较高,能够防范部分XSS等攻击手段。JSX的执行速度很快,因为它在编译为 Javascript 代码后进行了优化。Javascript 和 HTML 混合使用的模式,在熟悉了之后还能够大大提高开发效率

const element =

Hello, world!

; //将一个常量定义为元素的形式
ReactDOM.render(element, document.getElementById('root')); //将一个元素渲染到root这个结点上

3、虚拟DOM:虚拟DOM是在DOM的基础上建立一个抽象层,其实质是一个Javascript对象,当数据和状态发生了变化,都会被自动高效的同步到虚拟DOM中,最后再将仅变化的部分同步到真实的DOM中。

直接且频繁地对DOM进行操作会引起浏览器的Reflow、Repaint,会大大降低渲染性能,耗费大量的时间。如果不懂Reflow和Repaint,可以看看我之前的简述。
https://mu-mu.cn/blog/index.php/2020/07/22/1621/

而虚拟DOM,是一个存储于内存中的Javascript对象,React先将页面发生的变化更新到虚拟DOM,每一次的变化都和上一次虚拟DOM的状态进行比较,找到变化的部分,最终Raect会将包含了所有变化的虚拟DOM与真实DOM进行比较,找到DOM发生变化的部分,一次性应用到DOM上,从而提高页面渲染速度与性能。
一句话简要描述就是,减少对真实DOM的操作次数


4、组件化:组件化是 React 的核心,将一个复杂的页面按照需要拆分成一个个小的组件,小组件还能拆分成更小的组件,各个组件维护自己的状态和UI。当组件的状态改变时,React 会自动渲染相应的组件,而不是重新渲染整个页面。通过组件化,各个组件之间的耦合度大大地降低了,相互通讯变得便捷高效,而且组件还能够重复使用,代码复用性高,可维护性强


5、单向数据流:在 React 中,数据的组织形式是树状的,由上至下单向流动(对应DOM树)。数据能够从父组件轻易地到子组件,但是反过来就不那么容易了,且子组件只能使用父组件传递过来的数据,不能修改。如果子组件要传值给父组件,或者要修改父组件的代码,都只能通过父组件传递过来的方法实现。

6、函数式编程:函数是编程是一种设计思想,总的来说就是用尽量用函数组合来进行编程,并将函数封装,重复使用,像组件一样。像只是进行页面的展示和数据的渲染,没有逻辑处理的无状态组件就可以用函数组件实现。

7、灵活:能够配合其他框架共同使用,比如JQuery等等。

8、视图层框架:React是MVC中的 View 层,如果要构建大型的复杂应用,还需要配合其他的框架或者库来实现,如用 Redux 专门管理状态、用 Axios 发送请求等等。这也体现了 React 的灵活性。

以上就是 React 比较显著的几个特点,当然还有很多很多特点是我还没有提到的,也有很多我虽然提到了,但只是简单带过了,有需要的话还是得自己再去学习学习呀!好了,看到这里,是不是感觉手痒痒的了,很想拿看起来很棒的 React 写点什么了呀!我个人感觉,React 在三大前端框架中是最优秀的,不过想要入门和精通的成本自然也是略高的,如果是第一次接触框架,那可能 Vue 上手的会更快,不过对于追求性能和开发体验的小伙伴来说,React 真真是极好的呀!

另外,如果你有兴趣,或者是有问题想要与我探讨,欢迎来访问我的博客:https:mu-mu.cn/blog

推荐阅读
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • 本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ... [详细]
  • 解决PHP与MySQL连接时出现500错误的方法
    本文详细探讨了当使用PHP连接MySQL数据库时遇到500内部服务器错误的多种解决方案,提供了详尽的操作步骤和专业建议。无论是初学者还是有经验的开发者,都能从中受益。 ... [详细]
  • Python自动化处理:从Word文档提取内容并生成带水印的PDF
    本文介绍如何利用Python实现从特定网站下载Word文档,去除水印并添加自定义水印,最终将文档转换为PDF格式。该方法适用于批量处理和自动化需求。 ... [详细]
  • 本文详细分析了JSP(JavaServer Pages)技术的主要优点和缺点,帮助开发者更好地理解其适用场景及潜在挑战。JSP作为一种服务器端技术,广泛应用于Web开发中。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 深入理解 Oracle 存储函数:计算员工年收入
    本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程,并提供完整的代码示例。 ... [详细]
  • 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • 本文详细介绍了如何使用PHP检测AJAX请求,通过分析预定义服务器变量来判断请求是否来自XMLHttpRequest。此方法简单实用,适用于各种Web开发场景。 ... [详细]
  • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
  • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • 将Web服务部署到Tomcat
    本文介绍了如何在JDeveloper 12c中创建一个Java项目,并将其打包为Web服务,然后部署到Tomcat服务器。内容涵盖从项目创建、编写Web服务代码、配置相关XML文件到最终的本地部署和验证。 ... [详细]
author-avatar
玫瑰编辑1轶事
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有