持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

前言

上篇文章初步认识了一下jsx的语法，比较难记忆，从现在开始就一步步开始写jsx代码，写多了就记住了，先了解一下jsx里面如何渲染数组的

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习React</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        const data = ['鸽子精', '柠檬精', '复读机', '真香怪']
        const VDOM = (
            <div>
                <h1>人类四大本质</h1>
                <ul>
                    {
                        data.map((item, index) => {
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>

        )
        ReactDOM.render(VDOM, document.getElementById('test'))

    </script>
</body>

</html>

定义了一个全局变量数组，然后在React的render渲染中使用数组遍历这个变量数组

学习一下数组map方法，在之前我自己很少用。

map会返回一个新的数组
map不会对空数组进行检测
map不会改变原始数组
有三个参数，第一个必选，第二个第三个可选，第一个到第三个分别为遍历的当前的值，遍历的当前的键，遍历的数组

react会自动把列表打开渲染

直接看看不循环遍历数组的情况是怎么样： React会直接展开这个数组

js语句&js表达式

上篇文章说到标签中混入JS表达式时要用{}，今天就确定一下什么时表达式什么是语句：

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方例如：赋值操作，函数返回值
语句（代码）：例如：if判断，for循环，switch判断

要深入了解这里两个概念的区别，因为后面经常会在jsx里面使用表达式来操作变量

遍历数组必须要有key

假如不使用key：

和Vue一样会报一个没有唯一Key的错误。

React 学习笔记（3）jsx渲染数据列表

前言

完整代码

react会自动把列表打开渲染

js语句&js表达式

遍历数组必须要有key