React学习笔记—数据展现

时间 2019-12-10

标签 react 学习笔记数据展现栏目 React 繁體版

原文原文链接

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

开始

建立一个简单的Demo：react

#index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>React</title>
</head>
<body>

<div id="example"></div>

<script src="js/react.js"></script>
<script src="js/JSXTransformer.js"></script>
<script src="js/app.js" type="text/jsx"></script>
</body>
</html>

之后全部代码示例的HTML都是用上面的代码，只关注JavaScript的编写。git

#app.js
var HelloWorld = React.createClass({
    render: function () {
        return (
            <p>
            Hello,<input type="text" placeholder="Your name here" />!
            It is {this.props.date.toTimeString()}
            </p>
        );
    }
});

setInterval(function () {
    React.render(
        <HelloWorld date={new Date()} />,
        document.getElementById('example')
    );
}, 500);

React.createClass

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

React.render

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

功能

咱们大概了解到这段代码的功能，即便以前彻底没有接触过React。其实就是每隔500毫秒将下面这个结构：gulp

<p>
Hello,<input type="text" placeholder="Your name here" />!
It is {this.props.date.toTimeString()}
</p>

插入到下面的结构中：浏览器

<div id="example"></div>

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

响应式更新

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

#app.js
var HelloWorld = React.createClass({
    render: function () {
        return (
            <p>
            Hello,<input type="text" placeholder="Your name here" value={this.props.date.toTimeString()}/>!
            It is {this.props.date.toTimeString()}
            </p>
        );
    }
});

setInterval(function () {
    React.render(
        <HelloWorld date={new Date()} />,
        document.getElementById('example')
    );
}, 500);

组件相似于函数

React的组件很简明。能够把它看做有着props和state状态而且能够返回HTML结构的函数。由于组件很简明，因此很容易就能够看出它在干什么。grunt

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

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

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

JSX语法概述

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

<script src="js/react.js"></script>
<script src="js/JSXTransformer.js"></script>
<script src="js/app.js" type="text/jsx"></script>

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

#JSX语法
React.render(
    <div className="c-list">content</div>,
    document.getElementById('example')
);

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

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

<script src="js/react.js"></script>
<script src="js/JSXTransformer.js"></script>
<script src="js/app.js" type="text/jsx"></script>

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

参考资料：
Displaying Data

1. react展现数据
2. react+ react Hooks学习笔记
3. react学习笔记
4. React学习笔记
5. React 学习笔记
6. React学习笔记②
7. react 学习笔记
8. React学习笔记③
9. 【学习笔记】React
10. React学习笔记。
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• Flink 数据传输及反压详解