资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/React 简介

React 简介

voidking / 1413人阅读

摘要：介绍是内部的一个类库并开源，可用于创建用户交互界面。主要有四个主要概念构成，下面分别来简单介绍一下之所以引入虚拟，一方面是性能的考虑。允许直接在模板插入变量。这种单向数据流使得整个系统都是透明可预测的。

React 介绍 
React是Facrbook内部的一个JavaScript类库并开源，可用于创建Web用户交互界面。它引入了一种新的方式来处理浏览器DOM。那些需要手动更新DOM、费力地记录每一个状态的日子一去不复返。React使用很新颖的方式解决了这些问题。你只需要声明地定义各个时间点的用户界面，而无序关系在数据变化时，需要更新哪一部分DOM。在任何时间点，React都能以最小的DOM修改来更新整个应用程序。

React主要有四个主要概念构成，下面分别来简单介绍一下

Virtual DOM

之所以引入虚拟DOM，一方面是性能的考虑。Web应用和网站不同，一个Web应用 中通常会在单页内有大量的DOM操作，而这些DOM操作很慢

在React中，应用程序在虚拟DOM上操作，这让React有了优化的机会。简单说， React在每次需要渲染时，会先比较当前DOM内容和待渲染内容的差异， 然后再决定如何最优地更新DOM

除了性能的考虑，React引入虚拟DOM更重要的意义是提供了一种一致的开发方式来开发服务端应用、Web应用和手机端应用

因为有了虚拟DOM这一层，所以通过配备不同的渲染器，就可以将虚拟DOM的内容 渲染到不同的平台。而应用开发者，使用JavaScript就可以通吃各个平台了。相当棒的思路！且虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是 Diff部分，因而能达到提高性能的目的
React组件

对于React而言，则完全是一个新的思路，开发者从功能的角度出发，将UI分成不同的组件，每个组件都独立封装。
在React中，你按照界面模块自然划分的方式来组织和编写你的代码，对于评论界面而言，整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。


组件化开发特性:

React认为一个组件应该具有如下特征：

1.可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；

2.可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；

3.可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；

4.可测试（Testable）：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个UI进行测试容易的多。

组件定义

在React中定义一个组件也是相当的容易，组件就是一个 实现预定义接口的JavaScript类：

组件渲染

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
ReactDOM.render(
  
Hello, world!
,
  document.getElementById("example")
);

而这个方法， 必须而且只能返回一个有效的React元素。这意味着，如果你的组件是由多个元素构成的，那么你必须在外边包一个顶层 元素，然后返回这个顶层元素。比如我们创建一个布局组件：

render:function(){
    return React.createElement(
        "div",null,
        React.createElement("div",null,"header"),
        React.createElement("div",null,"content"),
        React.createElement("div",null,"footer")
    );
}

ES5方式定义组件

"use strict";
var HelloMessage = React.createClass({
  displayName: "HelloMessage",
    render: function render() {
        return React.createElement(
            "div",
            null,
            "Hello ",
            this.props.name
        );
    }
});

ES6方式定义组件

import "./Hello.css";
import "./Hello.scss";
import React, {Component} from "react";
// 内联样式
let style={
    backgroundColor:"blue"
}
export default class Hello extends Component {
    constructor(props) {
        super(props);
        this.state = { count: "es6"};
    }
    render() {
        return (
            

                
Hello world{this.state.count}

                

                
            

        )
    }
}

JSX方式定义组件

var HelloMessage = React.createClass({
  render: function() {
    return 
Hello {this.props.name}
;
  }
});
ReactDOM.render(, mountNode);
Jsx语法

什么是jsx

在用React写组件的时候，通常会用到JSX语法，粗看上去，像是在Javascript代码里直接写起了XML标签，实质上这只是一个语法糖，每一个 XML标签都会被JSX转换工具转换成纯Javascript代码，当然你想直接使用纯Javascript代码写也是可以的，只是利用JSX，组件的结构和组件之间的关系看上去更加清晰

Jsx语法使用

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。

var names = ["Alice", "Emily", "Kate"];
ReactDOM.render(
  

  {
    names.map(function (name) {
      return 
Hello, {name}!

    })
  }
  
,
  document.getElementById("example")
);

上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员

var arr = [
  
Hello world!
,
  
React is awesome
,
];
ReactDOM.render(
  
{arr}
,
  document.getElementById("example")
);

上面代码的arr变量是一个数组，结果 JSX 会把它的所有成员，添加到模板，运行结果如下。

Data Flow（单向数据流）

单向数据流

先来了解一下 Flux 的核心“单向数据流“怎么运作的：
Action -> Dispatcher -> Store -> View
更多时候 View 会通过用户交互触发 Action，所以一个简单完整的数据流类似这样：

整个流程如下：

1.首先要有 action，通过定义一些 action creator 方法根据需要创建 Action 提供给 dispatcher
2.View 层通过用户交互（比如 onClick）会触发 Action
3.Dispatcher 会分发触发的 Action 给所有注册的 Store 的回调函数
4.Store 回调函数根据接收的 Action 更新自身数据之后会触发一个 change 事件通知 View 数据更改了
5.View 会监听这个 change 事件，拿到对应的新数据并调用 setState 更新组件 UI
所有的状态都由 Store 来维护，通过 Action 传递数据，构成了如上所述的单向数据流循环，所以应用中的各部分分工就相当明确，高度解耦了。
这种单向数据流使得整个系统都是透明可预测的。

云服务器 GPU云服务器 react _React React 源码 react cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102870.html

相关文章

  • react-native电影简介app，了解一下？（android端）

    摘要：寒假结束了，在寒假期间玩了一下，模仿豆瓣实现了一个查看当前热门电影和即将上映电影的简单，项目比较简单，十分适合刚刚入门的同学查看。 寒假结束了，在寒假期间玩了一下react-native，模仿豆瓣实现了一个查看当前热门电影和即将上映电影的简单app，项目比较简单，十分适合刚刚入门的同学查看。首先我们要了解react-native： react-native中文网、react-nativ...

    RayKr 评论0 收藏0

  • React与Redux整合技术简介

    摘要：展示组件与容器组件的绑定库的基本开发思想是展示组件与容器组件相分离。技术上讲，容器组件就是使用从树中读取部分数据，并通过来把这些数据提供给要渲染的组件。 说明：阅读本篇文章需要对Redux有一定的了解，对Redux不了解的同学可先看看这篇文章Redux技术架构简介（一） 1. React中引入react-redux 为了让Redux和React更好的配合，Facebook专门开发了一个...

    idealcn 评论0 收藏0

  • React文档翻译系列（三）JSX简介

    摘要：文档翻译系列三简介先来看一下下面的变量声明这种有趣的标签语法既不是字符串也不是。这种形式被称作，他是的一种扩展语法。为便于阅读，我们将分隔成多行。表示对象将编译成调用。我们建议您为选择的编辑器搜索语法方案，以便和代码都能够被正确高亮的显示。 React文档翻译系列（三）JSX简介 先来看一下下面的变量声明： const element = Hello world! 这种有趣的标签语法既...

    wean 评论0 收藏0

  • 【全栈React】第18天: Flux 简介

    摘要：在方法中处理数据有三不同的角色派发器储存视图层我们的组件的主要思想是有一个单一源储存他们只能通过触发更新。这些操作负责调用派发器可以订阅更改并相应地更新自己的数据。与不同不使用派发器而是使用纯函数来定义数据变异函数。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3812原文：https://www.fullstackreact...

    mtunique 评论0 收藏0

  • React Native 简介：用 JavaScript 搭建 iOS 应用 (1)

    摘要：利用来搭建代码。虽然这不是安装的唯一方式，但我发现，是非常好用的包管理器。终端窗口打开后，会启动，并由服务器处理以上请求。面对这种情况时，需要关闭终端窗口，停止在上的应用，并重新运行。使用设定应用的用户界面。命名这两个文件为和。 【编者按】本篇文章的作者是 Joyce Echessa——渥合数位服务创办人，毕业于台湾大学，近年来专注于协助客户进行 App 软体以及网站开发。本篇文章中，...

    xiaoqibTn 评论0 收藏0

发表评论

登陆后可评论

0条评论

voidking

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<