React学习之路----2(React遍历数组)

来源：互联网发布：c语言数组变成字符串编辑：程序博客网时间：2024/06/03 20:13

前言:在学习之路第一篇博客中介绍了React的语法规则遵循JSX,以及需要的基本库文件,做这个React学习之路系列的博客是为了一些刚接触React的工程师们贡献一份自己的力量,同时我也希望可以一同进步.

现在进入正题,来介绍一下React的数组遍历,首先我们了解了React的编写规则遵循JSX编写规则,我们要逐渐适应混写的过程,在React中遍历数组需要用map方法来进行遍历,代码如下

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="build/react.js"></script><script type="text/javascript" src="build/react-dom.js"></script><script type="text/javascript" src="build/browser.min.js"></script></head><body><div id="example"></div><script type="text/babel">var arr = ["张三","李四","王五"];ReactDOM.render(<ul>{arr.map(function(name){return <li>{name}</li> //必须要return出来否则在dom中不会显示})}</ul>,document.querySelector("#example"))</script></body></html>

在React中我们可以看到当{ } 出现时,就可以进行JS的编程了,接下来我会对上面代码进行一次更改,这个更改在我初次学习的时候也有些不理解,React虽然颠覆了我们对原有的JS和JQ以及CSS的理解,但是正因为这样可以将不同的代码块进行抽离出来做到了低耦合开发相对于项目开发来说大大的加快了项目开发的效率,所以说React的出现时对开发效率的一次革新.接下来我会去讲解如何将代码抽离出来

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="build/react.js"></script><script type="text/javascript" src="build/react-dom.js"></script><script type="text/javascript" src="build/browser.min.js"></script></head><body><div id="example"></div><script type="text/babel">var arr = ["张三","李四","王五"];ReactDOM.render(<ul>{test()}</ul>,document.querySelector("#example"))function test(){var newArr = [];for(var i = 0; i < arr.length; i++){newArr.push(<li>{arr[i]}</li>)}return newArr;}</script></body></html>

在React中ReactDOM.render中编写逻辑JS不可以特别复杂所以说如果想在里面写一段逻辑很复杂的JS时切忌要把逻辑编程的东西抽离出来写在一个function中编写,在ReactDOM.render这个作用域中进行调用,

这个思想就是组件化开发,这也是React的优点所在,将一个个组件进行抽离在return出来,可以进行多次调用并且节约了开发成本.

0 0