什么是React框架?

2020.06.11 -

   

React是一个JavaScript框架,用于构建基于Web的应用程序的图形用户界面。使用此JavaScript库针对基于Web的框架构建了移动应用程序或单页Web应用程序。React的编程代码包含一些组件,这些组件可以分为功能组件和基于类的组件。

它是使用文档对象模型(DOM),虚拟DOM,JSX(JavaScript XML)和生命周期方法。

React的特点

1. JSX

JSX表示JavaScript XML。它是JS语言语法的扩展。它提供了一种使用类似于HTML的语法渲染组件的方法。React使用JSX编写其组件。它也可以使用纯JavaScript,但更喜欢JSX。预处理程序Babel使用它来将类似于JavaScript文件中的HTML的文本转换为标准JS对象。可以将HTML代码嵌入JavaScript中,以使HTML代码更容易理解,并增强JavaScript的性能并使应用程序更强大。

2.虚拟文档对象模型

React会创建一个内存中的数据结构缓存,然后计算先前的DOM与新的DOM之间的差异,然后更新所执行的更改或变异。它仅更新更改,而不更新整个应用程序。这有助于提高速度和性能,并减少内存浪费。

3.可测性

React视图用作状态的功能,其中状态决定了组件的行为。因此,我们可以更改状态,然后将其传递给ReactJS视图,然后确定输出以及动作,函数和事件。这使测试和调试变得容易。

4. SSR

它代表服务器端渲染。它允许在服务器端预渲染组件的初始状态。浏览器可以渲染,而无需等待所有JavaScript都被执行或加载。这使网页加载速度更快。即使当React仍在下载JavaScript,链接事件或在后端创建虚拟DOM时,它也可以帮助用户查看网页。

5.单向数据绑定

它允许单向数据流,即单向数据绑定。由于此功能,可以更好地控制应用程序。它使应用程序的状态包含在特定存储区中,因此所有其他组件保持松散耦合。这提高了应用程序的灵活性和效率。

6.简单性

JSX文件使应用程序简单易懂。可以使用标准JavaScript进行编码,但是JSX的使用使其更容易。几种生命周期方法及其基于组件的方法使其更易于学习和执行。

7.学习曲线

与其他框架相比,React的学习曲线较低。具有基本编程语言的初学者也可以轻松学习React。

它是如何工作的?

Facebook的开发人员团队在构建客户端应用程序时,发现文档对象模型(DOM)运行缓慢。为了使其更快,在React中实现了一个虚拟DOM,它是JavaScript中DOM的树形表示。

React在虚拟DOM上运行。进行更改后,它不会在浏览器上操作文档,而是在虚拟DOM上进行更改。虚拟DOM完全更新后,它将以最有效的方式更新浏览器的DOM。React的虚拟DOM完全位于内存中。

它表示Web浏览器的DOM,因此在编写React组件时,会创建一个廉价创建的虚拟组件,然后由React将其转换为DOM。React可以在浏览器中使用,但可以与Node.js一起使用,也可以与服务器一起使用。

我们怎么用它?

使用React很简单,因为在HTML中包含一个JS文件。让我们通过一个简单的示例查看React的用法:

<html>
<head>
<meta charset = “utf-8”>
<title> First React Code</title>
<script src = https://cdnjs.cloudfare.com/ajax/libs/react/15.3.1/react.min.js”> </script>
<script src = https://cdnjs.cloudfare.com/ajax/libs/react/15.3.1/react-dom.min.js”> </script>
<script src = https://unpkg.com/babel-standalone@6/babel.min.js”> </script>
</head>
<body>
<div id= “application”> </div>
<script type = “text/babel”>
ReactDOM. render(<h2> First Code </h2>, document. querySelector (‘#application’)
);
</script>
</body>
</html>

似乎有点困难,但易于实施和学习。

React使用场景 ?

它在当今市场上变得越来越流行,其功能正在帮助大公司改善其体验和界面。

诸如Facebook,Instagram,Netflix,纽约时报,雅虎邮件,可汗学院,WhatsApp,Vivaldi Browser,Codecademy和Dropbox之类的互联网巨头正在以一种或另一种方式使用React。俄罗斯的Sberbank也已使用React o开发其银行的网站。

像github.com,reddit.com,outlook.live.com,bitbucket.org,account.godaddy.com之类的许多网站也使用React。

React的优缺点

以下是优点和缺点:

优点

以下是优点:

  • SEO友好
  • 为UI创建测试用例很容易。
  • React组件可以轻松重用。
  • 确保更快的渲染。
  • 调试很容易。
  • 易于迁移。
  • 提高生产力。
  • 编写组件很容易。
  • 稳定的代码。
  • 有一个有用的开发人员工具集。
  • React native可用于移动应用程序开发
  • 简单易学。
  • 增强性能。

缺点

以下是缺点:

  • 高速发展。
  • 文档差。
  • 额外的SEO麻烦。
  • 仅面向视图。
  • 初学者的学习曲线。
  • 需要手动处理数据更改。
  • 在某些情况下需要更多代码。

以上便是什么是React框架的全部内容,从介绍到特点以及优缺点作了非常详细的解读,希望能对您有所帮助。

本站文章禁止转载,违者必究
阅 172
0

React是一个JavaScript框架,用于构建基于Web的应用程序的图形用户界面。使用此JavaScrip […]

湘公网安备 43011102001693号

    湘ICP备19003021号-1