React基础的补充知识点

上一篇文章我们讲述了如何使用React在浏览器上进行一些基本的输出，本篇内容作为补充，讲解一下我们常用的 数据格式（数组，json） 如何在React里任意的输出

首先开始我们的三部曲操作（引包建容和输出）话不多说，上代码

引包

<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/babel.js"></script>

建容

 <div id="app"></div>

输出

想必大家对常规的输出已经深入了解了 毕竟大家都是那么的优秀，这里就不做复述了 如果还有不了解的，就去看看我的上一篇文章 React的初体验

第一种 数组

 <script type="text/babel">
        var users = ['篮球','足球','羽毛球','台球']
        ReactDOM.render(
            <div>      
                  {//这组大括号的作用： 利用插值表达式将我们的js代码展现出来
                      users.map((item,index)=>{//使用数组的map方法 对数据结构进行遍历，依次输出
                          return   <ul key={index}>
                          			  <li className="ball">{item}</li>
                          		   </ul>
                      })
                  }
            </div>,
            document.getElementById('app')
        ) 
    </script>

这里说一下key的作用，key是React强烈要求我们添加上的，众所周知，react对性能方面做到了极致，当我们修改其中的某条数据时，React会去作对比，当key值不变，如果前后两次值一样，那么就不做更新来达到优化性能的目的，所以key值是其中的依据。
看一下效果

第一种 对象（JSON）

<script type="text/babel">
        var obj = {name:"金",age:26,hobby:"play basketball"}
        ReactDOM.render(
            <div>
                <ul>
                    {
                        // Object.keys(obj) ===> 对象转为数组
                        /* Object.keys(obj) ===> 对象转为数组 */
                        Object.keys(obj).map(key=>{
                            return <li key={key}>{obj[key]}</li>
                        })
                    }
                </ul>
            </div>,
            document.getElementById('app')
        ) 
    </script>

操作这样的数据我们的思路就是 将对象转换为数组（Object.keys( ) ） 然后再去调用每一项的值
效果就是这样的啦

我们的基操结束了，对React有基本的认识了也掌握了基本数据如何渲染，下一篇我们开始学习如何利用React的脚手架去搭建项目