Javascript

Hello React

本文主要是介绍Hello React,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

React

React起源于Facebook内部项目,一开始用于假设instageam,在2012年5月开源,它是一个用于构建用户界面的JavaScript库,React拥有较高的性能,代码逻辑简单,所以越来越多的人开始关注和使用它。

React特点:

  1. 声明式设计:采用声明式设计,可以轻松描述应用。

  2. 高效:React通过对DOM的模拟,最大限度的减少了与真实DOM的交互。

  3. 灵活:React可以与已知的库或框架很好的配合。

  4. JSX:JSX是一种JavaScript扩展语法。

  5. 组件:通过React构建组件,使得代码容易得到复用,能够更好的应用在大型项目中。

虚拟DOM

浏览器在初始化时会载入一个HTML文档,当页面内容需要改变时,JavaScript会根据用户操作来创建或者删除节点或者是插入新元素,这让JavaScrpit管理DOM变得非常复杂而效率又低,这意味着开发人员要认真的了解如何修改UI的细节来优化程序。从编码角度来看,先将特定的元素清空然后重新构建他们,比保留原有的元素然后研究怎么跟新他们更容易一些。React提出了虚拟DOM的概念,采用虚拟DOM之后,我们将不需要直接与DOM API直接交互,而是使用一组指令,让React和浏览器交互。虚拟DOM实际是javaScript对象,直接访问javaScript对象比直接与DOM交互效率高的多。

Hello React

使用React很简单,只需要在页面中引入React的依赖:

//ReactUI库,用来创建视图
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
//ReactDOM库,用于在浏览其中渲染UI
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
//支持JSX语法
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

现在然我们来创建第一个React页面:

  1. 在页面中加入依赖

  2. <script>中添加Type=text/babel使其支持JSX语法

  3. 在HTML中准备一个容器,用于将我们用React创建的虚拟DOM添加进去

  4. 创建一个虚拟DOM,将虚拟DOM放入容器中

在HTML中创建一个容器:这个稍后我们将会将虚拟DOM装入div中

<div id="text"></div>

在JavaScript中添加以下代码:

<script type="text/babel">
    //JSX
    const element = <h1>Hello,world!</h1>
    ReactDOM.render(
        element,
        document.querySelector("#text")
    );
</script>

 

于是我们便可以在网页中看到效果:

<h1>Hello,world!</h1>就是JSX语法,JSX具有JavaScript的全部功能,它用于创建一个虚拟的DOM元素,然后使用ReactDOM.render()将这些元素渲染为DOM。

这篇关于Hello React的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!