React学习之元素渲染

说明：本系列所有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