23-React Render Element

第23节 React Render Element

1、Element

元素是反应应用程序的最小积木。

元素描述你在屏幕上看到的内容.：

const element= <h1>你好，世界</h1>；

不同于浏览器的DOM元素，react元素是普通的对象，React 通过解析每一个创建的 Element， 计算出需要对 DOM 进行的实际操作来完成渲染的

var React = require('react');
var ReactDOM = require('react-dom');

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('root')
	);
}, 500);

打开浏览器看看效果：发现时间一直在变化，而input框，无论我们怎么操作，一直保持原样不变。

按照我们固有的想法，应该是每隔500毫秒，重新替换div当中的内容，而输入框一直不变.

上面的例子中，我们只是创建了个组件，并将它插入DOM中，并没有写别的代码。而奇特的效果都是React帮我们实现的。

除非有必要，否则React是不会直接去操作DOM的。React使用了内部的虚拟DOM，当数据发生改变，先在虚拟DOM中计算变化，最后将变动的部分反应到真实的DOM中。

我们知道，频繁操作DOM代价是昂贵的，它会导致页面反复repaint。React声称自己很快，正是基于此。

2、属性

input相对于这个组件来说，是它的属性，并且没有嵌入动态的数据。而在React的设定中，属性是不可变的。

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

3、ReactElement

React 中最主要的类型就是 ReactElement。它有四个属性：type，props，key 和 ref。

它没有方法，并且原型上什么都没有

var root = React.createElement(‘div');

为了渲染一个新的树形结构到 DOM 中，你创建若干个 ReactElement，然后传给 React.render 作为第一个参数，同时将第二个参数设为一个正规的 DOM 元素 （HTMLElement 或者 SVGElement）。不要混淆 ReactElement 实例和 DOM 元素实例。

一个 ReactElement 实例是一个轻量的，无状态的，不可变的，虚拟的 DOM 元素 的表示。是一个虚拟 DOM。

React.render(root, document.body);

要添加属性到 DOM 元素，把属性对象作为第二个参数传入 React.render，把子级作为第三个参数传给 React.render