ReactJS - 03 - ReactJS之入门之01之 Component 组件元素

ReactJS - 03 - ReactJS之入门之01之 Component 组件元素

一、概念解释

组件元素（Component）： 是组成 ReactJS 的基本元素，用于页面上输出一段 HTML 代码（视图）。

组件元素（Component）： 是静态的。即：你无法通过修改元素的自身属性而达到更新页面的目的。

不借助其它手段，此时若想更新组件元素，只能从新 render 一个新的组件元素到页面上。
那么 ReactJS 是如何完成动态元素更新的呢？
请看第二篇，组件（数据的）状态 —— state 。

<script type="text/babel">

//我是组成 ReactJS 的最基本元素：组件元素。
const element = <h1>Hello, world!</h1>;

//我需要用 render 方法把我渲染到页面上。
ReactDOM.render(
    element,
    document.getElementById('example')
);

</script>

说明一：
element 的写法是采用 html 标签的样式（如上），但是那只是写法。最终会被 React 解析成为一个 JavaScript 的 DOM 对象。这是它的真正面目。

注意上面的 script 标签类型是 text/babel ，它被最终解释后执行的代码如下：

<script type="text/javascript">
'use strict';

// 组件被解析成了 javascript DOM 对象，这是它的真正面目。
var element = React.createElement(
    'h1',
    null,
    'Hello, world!'
);
ReactDOM.render(element, document.getElementById('example'));

</script>

说明二：

关于组件元素（Component）在 text/babel 标签中的写法：
    - 可以直接给一个值： html 标签，
    - 也可以由一个函数返回一个 html 标签。（但是要求函数名大写）

它们都是 组件元素（Component） 在写法上的表现形式。

<script type="text/babel">

// 1.
const element = <h1>Hello, world!</h1>;

// 2.
const Element = function() {
    return <h1>Hello, world!</h1>
}


</script>

注意：这两种写法在 render 调用时，也是不同。

<script type="text/babel">


const element =<h1>Hello, world!</h1>;
const Element = function() {
    return <h1>Hello, world!</h1>
}

ReactDOM.render(
    element,
    document.getElementById('example1')
);

//函数的 render 是这样调用的。
ReactDOM.render(
    <Element />,
    document.getElementById('example2')
);

</script>

在线测试





转载请注明，
原文出处： http://lixh1986.iteye.com/blog/2429332

























-