欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-17 09:07:55
...
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

























-