React学习笔记—数据展示

小俞

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

开始

创建一个简单的Demo:

#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的编写。

#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代码主要就是构建通用的组件。

React.render

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

功能

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

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

插入到下面的结构中:

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

打开浏览器看看效果:发现时间一直在变化,而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 (
            <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的组件很简明。可以把它看作有着propsstate状态并且可以返回HTML结构的函数。因为组件很简明,所以很容易就可以看出它在干什么。

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

阅读 12.4k

学习笔记
自我学习总结

对技术不懈追求

8.3k 声望
361 粉丝
0 条评论

对技术不懈追求

8.3k 声望
361 粉丝
文章目录
宣传栏