React学习之元素渲染

爱被打了一巴掌 2022-11-29 13:29 138阅读 0赞

### **说明：本系列所有demo代码的github地址为：[https://github.com/Brucewu998/react.js-learning][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][https_zh-hans.reactjs.org_docs_react-dom.html_render]，所以在这里的element是一个React元素，像上面的代码，或者是一个组件，例如现在有Header, Slider, Content, Footer等几个组件，我们们想通过他们组合成一个完整的页面，例如这个时候有一个div标签：

我可以通过下面这种方式渲染：

ReeactDOM.render(
        <div>
            <Header />
            <Slider />
            <Content />
            <Footer />
        </div>,
        document.getElementById("container")
    )

所以所有的组件元素都是在id为container这个DOM根节点上渲染出来的，当然我们为了将所有组件能组合在一起，给它们套上了一层div，如下图：

![2020082200164435.png][]

效果：

![20200822002653901.png][]

###  插入数组变量渲染 ###

例如，我们定义了两个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树的结构如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzM4OTgz_size_16_color_FFFFFF_t_70][]

采用数组遍历的方法得再使用JavaScript编程的方式去实现遍历，然后每次返回一个JSX模板，但提前定义好一个包含JSX模板的数组就不用遍历，React再渲染的时候会自动帮我们遍历，效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzM4OTgz_size_16_color_FFFFFF_t_70 1][]

上一篇：[ **React学习-开篇**][React_-]

下一篇：**[React学习之组件与props][React_props]**

[https_github.com_Brucewu998_react.js-learning]: https://github.com/Brucewu998/react.js-learning
[https_zh-hans.reactjs.org_docs_react-dom.html_render]: https://zh-hans.reactjs.org/docs/react-dom.html#render
[2020082200164435.png]: /images/20221124/0242d6333464461e98036468cced1aef.png
[20200822002653901.png]: /images/20221124/c4fa68df23d3490ca602db60d3d15dd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzM4OTgz_size_16_color_FFFFFF_t_70]: /images/20221124/22c63cf645a649c297f57691c2ba60db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzM4OTgz_size_16_color_FFFFFF_t_70 1]: /images/20221124/33072029ea674455b0366da19c6b0fc1.png
[React_-]: https://blog.csdn.net/qq_37338983/article/details/108121485
[React_props]: https://blog.csdn.net/qq_37338983/article/details/108207862