react学习（2）Displaying Data

最新推荐文章于 2024-09-25 18:15:20 发布

weixin_34209406

最新推荐文章于 2024-09-25 18:15:20 发布

阅读量50

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/duanyunhu/blog/751485

版权

2019独角兽企业重金招聘Python工程师标准>>>

开始

让我们看一个非常简单的事例不要问为什么只管写好看效果先。

1.使用下面代码创建一个hello-react.html的文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">

      // ** Your code goes here! **

    </script>
  </body>
</html>

以上文件中的js在天朝可能加载不到的请自行下载react的包试用本地的即可，下载地址：http://reactjs.cn/react/downloads.html（这个是不需要翻墙可以看到）以后所有代码示例的HTML都是用上面的代码，只关注JavaScript的编写。

2.创建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() {
  ReactDOM.render(
    <HelloWorld date={new Date()} />,
    document.getElementById('example')
  );
}, 500);

React.createClass

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

React.render

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

功能

我们大概了解到这段代码的功能，即使之前完全没有接触过React。其实就是每隔500毫秒将HelloWrold组件渲染到id为：example的dom中

注意

打开浏览器看看效果：发现时间一直在变化，而input框，无论我们怎么操作，一直保持原样不变。
这就奇怪了，按照我们固有的想法，应该是每隔500毫秒，重新替换div当中的内容啊，为啥时间一直在变，而输入框一直不变呢？然后删除dom中react渲染生成的注释破坏了马上就报错了，说明react会处理我们的dom为了能方便更新。
这就是React的神奇之处了。这是react中自动diff计算dom的变化只更新有差异的地方，所以说react效率高了。看一下截图即明白了

响应式更新

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

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结构的函数。因为组件很简明，所以很容易就可以看出它在干什么。

React components can only render a single root node. If you want to return multiple nodes they must be wrapped in a single root.

以上官网原话：react渲染仅仅一个根节点的元素，如果你想返回多个节点必须用一个元素包裹多个节点变成一个根节点

JSX语法

1.这种语法浏览器是不识别的，引入我们编写的JavaScript文件的时候需要指定type类型为text/jsx，同时还要需要引入JSXTransformer.js将JSX语法转化为真正的JavaScript代码。当然了，这个转化过程是需要花费时间的。

2.组件应该同关注分离，而不是同模板和展现逻辑分离。结构化标记和生成结构化标记的代码是紧密关联的，此外，展现逻辑一般都很复杂，使用模板语言会使展现变得笨重。

3.我们发现，对这个问题最好的解决方法是生成HTML和组件树直接从JavaScript代码，你可以使用所有的一个真正的编程语言的表达能力，构建用户界面。

你可以使用HTML语法JSX创建JavaScript对象。生成一个链接在react中使用纯JavaScript如下：

React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')

使用jsx语法：

<a href="https://facebook.github.io/react/">Hello!</a>

我们发现，这使得构建react应用程序更容易，设计师往往喜欢html语法，但JSX对于react不是必须的。

React不使用jsx

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
ReactDOM.render(root, document.getElementById('example'));

由以上可以看出写jsx的语法与原生的javascript相比，jsx确实是比较推荐的写法。

下一章准备学习jsx

转载于:https://my.oschina.net/duanyunhu/blog/751485