ReactJS - 03 - ReactJS之入门之01之 Component 组件元素
程序员文章站
2022-06-17 09:07:55
...
ReactJS - 03 - ReactJS之入门之01之 Component 组件元素
一、概念解释
组件元素(Component): 是组成 ReactJS 的基本元素,用于页面上输出一段 HTML 代码(视图)。
组件元素(Component): 是静态的。即:你无法通过修改元素的自身属性而达到更新页面的目的。
不借助其它手段,此时若想更新组件元素,只能从新 render 一个新的组件元素到页面上。
那么 ReactJS 是如何完成动态元素更新的呢?
请看第二篇,组件(数据的)状态 —— state 。
说明一:
element 的写法是采用 html 标签的样式(如上),但是那只是写法。最终会被 React 解析成为一个 JavaScript 的 DOM 对象。这是它的真正面目。
注意上面的 script 标签类型是 text/babel ,它被最终解释后执行的代码如下:
说明二:
关于组件元素(Component)在 text/babel 标签中的写法:
- 可以直接给一个值: html 标签,
- 也可以由一个函数返回一个 html 标签。(但是要求函数名大写)
它们都是 组件元素(Component) 在写法上的表现形式。
注意:这两种写法在 render 调用时,也是不同。
在线测试
转载请注明,
原文出处: http://lixh1986.iteye.com/blog/2429332
-
一、概念解释
组件元素(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
-
下一篇: js数组中常用方法