React怎么应用

这篇文章主要介绍“React怎么应用”，在日常操作中，相信很多人在React怎么应用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”React怎么应用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

React 介绍

        React是由Facebook（脸书）开源的一个进行创建用户界面的一款JavaScript库，如今已应用于Facebook及旗下的Instagram应用。

        React与庞大的AngularJS不同的地方在于它只专注于MVC框架中的V，即视图；这点使得React很容易与开发者已有的开发栈进行融合。

        React在使用的时候，你应该从UI出发，抽象出不同的组件，继而将它们拼装起来；这点顺应了Web开发组件化的趋势。

React应用

React 的核心思想是：封装组件。

各个组件维护自己的状态和UI，当状态变更，自动重新渲染整个组件。

基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM元素，然后操作 DOM 去更改 UI。

React 大体包含下面这些概念：

•  组件

•  JSX

•  Virtual DOM

•  Data Flow

这里通过一个简单的组件来快速了解这些概念，以及建立起对 React 的一个总体认识。

import React, { Component } from 'react';

 import { render } from 'react-dom';

 class HelloMessage extends Component {

   render() {

     return <div>Hello {this.props.name}</div>;

   }

 }

// 加载组件到 DOM 元素 mountNode

render(<HelloMessage name="John" />, mountNode);

组件

React 应用都是构建在组件之上。

上面的 HelloMessage 就是一个 React构建的组件，最后一句 render 会把这个组件显示到页面上的某个元素 mountNode 里面，显示的内容就是 <div>Hello John</div>。

props 是组件包含的两个核心概念之一，另一个是 state（这个组件没用到）。可以把 props 看作是组件的配置属性，在组件内部是不变的，只是在调用这个组件的时候传入不同的属性（比如这里的 name）来定制显示这个组件。

JSX

        从上面的代码可以看到将 HTML 直接嵌入了 JS 代码里面，这个就是 React 提出的一种叫 JSX 的语法，这应该是最开始接触 React 最不能接受的设定之一，因为前端被“表现和逻辑层分离”这种思想“洗脑”太久了。但实际上组件的 HTML 是组成一个组件不可分割的一部分，能够将 HTML 封装起来才是组件的完全体，React 发明了 JSX 让 JS 支持嵌入 HTML 不得不说是一种非常聪明的做法，让前端实现真正意义上的组件化成为了可能。

        好消息是你可以不一定使用这种语法，后面会进一步介绍 JSX，到时候你可能就会喜欢上了。现在要知道的是，要使用包含 JSX 的组件，是需要“编译”输出 JS 代码才能使用的，之后就会讲到开发环境。

Virtual DOM

当组件状态 state 有更改的时候，React 会自动调用组件的 render 方法重新渲染整个组件的 UI。

        当然如果真的这样大面积的操作 DOM，性能会是一个很大的问题，所以 React 实现了一个VirtualDOM，组件 DOM 结构就是映射到这个 Virtual DOM 上，React 在这个 Virtual DOM上实现了一个 diff 算法，当要重新渲染组件的时候，会通过 diff 寻找到要变更的 DOM 节点，再把这个修改更新到浏览器实际的DOM 节点上，所以实际上不是真的渲染整个 DOM 树。这个 Virtual DOM 是一个纯粹的 JS 数据结构，所以性能会比原生 DOM 快很多。

Data Flow

        “单向数据绑定”是 React推崇的一种应用架构的方式。当应用足够复杂时才能体会到它的好处，虽然在一般应用场景下你可能不会意识到它的存在，也不会影响你开始使用React，你只要先知道有这么个概念。

到此，关于“React怎么应用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！