React 显示数据 #React

对于 UI 来说,无非就是显式数据, 而通过 React 就能够很容易绑定数据并且显式, 还能够时刻自动保持同步.

入门

先来看段代码:

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

      // ** Your code goes here! **
        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);
    </script>
  </body>
</html>

//① 这个地方为了简单演示,直接通过 babel 的浏览器版本编译 JSX 语法
//② react 库相关

打开这个页面试试看, 这个会不断执行ReactDOM.render()函数, 而每次会取到当前的时间. 然后通过<HelloWorld date={new Date()} /> 传入到Helloworld 这个 react 的组件对象里, 然后通过this.props 就可以直接取到/=.

自动更新

这里提到的一个就是 react 使用了一个最小最快的虚拟 DOM 来 diff 前后的状态最小化修改对应的 UI, 而prop s 也就是属性的缩写了.他们通过 JSX 的语法传给 React 的对象组件, 应该把这个对象看做是不可修改的.不要直接在后端修改它.

组件就是一个函数

react 组件就是简单的函数,他们会拿props 和state 来画 HTML. 记住这一点就能很容易阅读 react 的组件了.

react 每次只能 render 一个根节点.

JSX 语法

我们相信, 不, 坚信相比模板技术或者显示逻辑等, 组件的方式才能够很好的处理 UI 相关的问题. 用 javascript 代码来直接生成这些 HMTL 和组件将会更加清晰, 而且这样来管理 UI 更加有力. 通过 JSX 可以更加方便来写 javascript 的对象, 完全通过 html 的语法来写.

如果使用 javascript 写一个 html 标记是这样的:

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

而通过 JSX:

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

而他们的最终产物都是一样的.

不用 JSX

JSX 对于 react 来说完全是可选的, 你完全可以不使用它, 如果你要创建一个 react 的 element 那就直接通过React.createElement 来实现. 你可以给它标签名或者一个已有的react 组件, 然后一个属性对象, 然后就是一些可选的子节点.

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'));