说明:本系列所有demo代码的github地址为:https://github.com/Brucewu998/react.js-learning,笔者会不断更新这些代码,本篇代码在目录下demo-02文件夹下。
元素渲染
在React中,元素是构成React应用的最小单位,就如同一个HTML文档包含各种各样的标签一样,React中的元素描述了我们要在屏幕上构建出来的内容,官方给出的解释是React元素比浏览器DOM元素开销要小很多, 如:
const element = <div>Hello, react.js!</div>
在上一节讲过, 已创建的元素,通过ReactDOM.render()方法可以将某个元素渲染为真实的DOM节点,通常由React构建的应用只有单一的根DOM节点,这里笔者的理解是这样的,如果ReactDOM.render()只接收三个参数,ReactDOM.render(element, container, [, callback]),详细参考https://zh-hans.reactjs.org/docs/react-dom.html#render,所以在这里的element是一个React元素,像上面的代码,或者是一个组件,例如现在有Header, Slider, Content, Footer等几个组件,我们们想通过他们组合成一个完整的页面,例如这个时候有一个div标签:
<div id="container"></div>
我可以通过下面这种方式渲染:
ReeactDOM.render(
<div>
<Header />
<Slider />
<Content />
<Footer />
</div>,
document.getElementById("container")
)
所以所有的组件元素都是在id为container这个DOM根节点上渲染出来的,当然我们为了将所有组件能组合在一起,给它们套上了一层div,如下图:
效果:
插入数组变量渲染
例如,我们定义了两个JavaScript数组变量,一个用于遍历,一个直接放JSX模板:
let names = ['bruce', 'jack', 'tony']; // 数组遍历
let arr = [
<h1 key={'h1'}>Hello world!</h1>,
<h2 key={'h2'}>React is awesome</h2>
];//直接插入带有JSX模板的数组
渲染如下:
ReactDOM.render(
<div>
<div>
{names.map((item, index) => {
return <div key={index.toString()}>Hello, { item }</div>
})}
</div>
<div class="demo-h">{ arr }</div>
</div>,
document.getElementById('demo-2')
);
DOM树的结构如下图:
采用数组遍历的方法得再使用JavaScript编程的方式去实现遍历,然后每次返回一个JSX模板,但提前定义好一个包含JSX模板的数组就不用遍历,React再渲染的时候会自动帮我们遍历,效果如下:
上一篇: React学习-开篇
下一篇:React学习之组件与props