React学习笔记—数据展示

Magicer 发布于2019-08-21 10:28 / 1967人阅读

摘要：我们使用最基本的事就是用来展现数据。使得展现数据变得简单，并且当数据改变时，能自动保持的更新。使用了内部的虚拟，当数据发生改变，先在虚拟中计算变化，最后将变动的部分反应到真实的中。可以把它看作有着和状态并且可以返回结构的函数。

我们使用UI最基本的事就是用来展现数据。React使得展现数据变得简单，并且当数据改变时，React能自动保持UI的更新。

开始

创建一个简单的Demo：

#index.html



    
    React

以后所有代码示例的HTML都是用上面的代码，只关注JavaScript的编写。

#app.js
var HelloWorld = React.createClass({
    render: function () {
        return (
            
            Hello,!
            It is {this.props.date.toTimeString()}
            
        );
    }
});

setInterval(function () {
    React.render(
        ,
        document.getElementById("example")
    );
}, 500);

React.createClass

用来创建一个组件类，前面也说了，编写React代码主要就是构建通用的组件。

React.render

将React的模板转化为HTML，并插入到相应的DOM结构中。

功能

我们大概了解到这段代码的功能，即使之前完全没有接触过React。其实就是每隔500毫秒将下面这个结构：


Hello,!
It is {this.props.date.toTimeString()}

插入到下面的结构中：

打开浏览器看看效果：发现时间一直在变化，而input框，无论我们怎么操作，一直保持原样不变。
这就奇怪了，按照我们固有的想法，应该是每隔500毫秒，重新替换div当中的内容啊，为啥时间一直在变，而输入框一直不变呢？
这就是React的神奇之处了。

响应式更新

上面的例子中，我们只是创建了个组件，并将它插入DOM中，并没有写别的代码。而奇特的效果都是React帮我们实现的。
除非有必要，否则React是不会直接去操作DOM的。React使用了内部的虚拟DOM，当数据发生改变，先在虚拟DOM中计算变化，最后将变动的部分反应到真实的DOM中。我们知道，频繁操作DOM代价是昂贵的，它会导致页面反复repaint。React声称自己很快，正是基于此。
回过头来看看上面的例子，为啥子input不变，而时间一直在变化？input相对于这个组件来说，是它的属性，并且没有嵌入动态的数据。而在React的设定中，属性是不可变的。稍稍改变下JavaScript代码，再来看下效果：

#app.js
var HelloWorld = React.createClass({
    render: function () {
        return (
            
            Hello,!
            It is {this.props.date.toTimeString()}
            
        );
    }
});

setInterval(function () {
    React.render(
        ,
        document.getElementById("example")
    );
}, 500);

组件类似于函数

React的组件很简明。可以把它看作有着props和state状态并且可以返回HTML结构的函数。因为组件很简明，所以很容易就可以看出它在干什么。

React组件的render方法中，返回的结构只能有一个根节点。

#正确的
var HelloWorld = React.createClass({
    render: function () {
        return (
          
              
          
        );
    }
});

#错误的
var HelloWorld = React.createClass({
    render: function () {
        return (
          
          
        );
    }
});

JSX语法概述

细心的人会发现，我们编写的JavaScript代码中，所有的模板内容都没有加引号。这种JavaScript和HTML混写的方式就是所谓的JSX语法了，React独创。
这种语法浏览器是不识别的，引入我们编写的JavaScript文件的时候需要指定type类型为text/jsx，同时还要需要引入JSXTransformer.js将JSX语法转化为真正的JavaScript代码。当然了，这个转化过程是需要花费时间的。

React的作者认为，组件应该同关注分离，而不是同模板和展现逻辑分离。结构化标记和生成结构化标记的代码是紧密关联的，此外，展现逻辑一般都很复杂，使用模板语言会使展现变得笨重。
React解决这个问题的方式就是：直接通过JavaScript代码生成HTML和组件树，这样的话，你就可以使用JavaScript富丰的表达力去构建UI。为了使这个过程变得更简单，React创建了类似HTML的语法去构建节点树，也就是JSX了。
JSX语法是可选的，也就是说你也可以不使用，直接写JavaScript代码。看个对比例子：

#JSX语法
React.render(
    content,
    document.getElementById("example")
);

#plain JavaScript
React.render(
    React.createElement("div", {className: "c-list"}, "content"),
    document.getElementById("example")
);

这样简单的例子，我们都能感觉到JSX更加的语义化，更别说复杂的组件了。所以强烈建议使用JSX。
前面说到JS的引入

生成环境则不能这么干，因为JSX的转化是需要时间的。线上的代码应该是直接可执行的，我们应该在离线环境下提前转化，这里就要使用到工具了。

react-tools

grunt-react

gulp-react

参考资料：
Displaying Data

GPU云服务器云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

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

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

好程序员React精品项目全集：商城管理后台（视频+源码+笔记）

摘要：今天给大家带来了好程序员实战项目商城管理后台。配合项目学习会让你更快掌握它的使用方法下面就来看看好程序员这套实战项目课程介绍好程序员项目本项目是一个使用开发的商城系统的管理后台，里面登录判断，接口调用，数据展示和编辑，文件上传等后台功能。众所周知，项目经验对于一个程序员变得越来越重要。在面...

李世赞 2021-11-11 16:55 评论0 收藏0
React学习笔记—JSX

摘要：使用，不一定非要使用语法，可以使用原生的进行开发。注意标签的属性和，需要写成和。因为两个属性是的保留字和关键字。在的设定中，初始化完后，是不可变的。改变会引起无法想象的后果。重要的是这个过程是由操控的，不是手动添赋值的属性。深入JSX JSX可以看作JavaScript的拓展，看起来有点像XML。使用React，可以进行JSX语法到JavaScript的转换。 Why JSX? ...

marser 2019-08-21 10:29 评论0 收藏0
React学习笔记—组件组合

摘要：说的通俗点如果组件出现在了组件的方法中，那么组件就是所有者。所有者和被所有者关系是针对组件的，父子关系是针对结构的。子调节调节发生在更新的过程中。带有状态的子节点对大部分组件来说，问题不大。应该加在组件上，而不是标签上。关注分离我们在编程的时候碰到相同的功能，可以通过抽出公共方法或者类来实现复用。当我们构建新的组件的时候，尽量保持我们的组件同业务逻辑分离，将相同功能的组件抽出一个...

xiaodao 2019-08-22 10:56 评论0 收藏0
[BizCharts学习笔记] --- 数据可视化

摘要：所以笔者选择了，为什么会选择一是因为它是阿里出品，经历了一年左右的打磨已经完全适应在使用其次是它支持自由定制，不会像那样高度封装，所以在开发复杂图表的时候会更加得心应手。只是阿里图表库中的一员。实际上，在数据可视化这一块笔者并没有很多的开发经历和经验，不过正是因为这个问题笔者才决定学习一门数据可视化框架来弥补自己在这一方面的不足。在这个大数据统治的时代，数据能给我们提供前所未有的便捷...

CoffeX 2019-08-23 11:56 评论0 收藏0
Redux 基础 - react 全家桶学习笔记（一）

摘要：二基础就是一个普通的。其他属性用来传递此次操作所需传递的数据，对此不作限制，但是在设计时可以参照标准。对于异步操作则将其放到了这个步骤为添加一个变化监听器，每当的时候就会执行，你可以在回调函数中使用来得到当前的。注：这篇是16年10月的文章，搬运自本人 blog...https://github.com/BuptStEve/... 零、环境搭建参考资料英文原版文档中文文档墙...

aaron 2019-08-23 10:58 评论0 收藏0