React.js 小书 Lesson13 - 渲染列表数据
React.js 小书 Lesson13 - 渲染列表数据
转载请注明出处,保留原文链接以及作者信息 在线阅读:http://huziketang.com/books/react 列表数据在前端非常常见,我们经常要处理这种类型的数据,例如文章列表、评论列表、用户列表…一个前端工程师几乎每天都需要跟列表数据打交道。 React.js 当然也允许我们处理列表数据,但在使用 React.js 处理列表数据的时候,需要掌握一些规则。我们这一节会专门讨论这方面的知识。 渲染存放 JSX 元素的数组假设现在我们有这么一个用户列表数据,存放在一个数组当中: const users = [ { username: 'Jerry',age: 21,gender: 'male' },{ username: 'Tomy',age: 22,{ username: 'Lily',age: 19,gender: 'female' },{ username: 'Lucy',age: 20,gender: 'female' } ] 如果现在要把这个数组里面的数据渲染页面上要怎么做?开始之前要补充一个知识。之前说过 JSX 的表达式插入 ... class Index extends Component { render () { return ( <div> {[ <span>React.js </span>,<span>is </span>,<span>good</span> ]} </div> ) } } ReactDOM.render( <Index />,document.getElementById('root') ) 我们往 JSX 里面塞了一个数组,这个数组里面放了一些 JSX 元素(其实就是 JavaScript 对象)。到浏览器中,你在页面上会看到:
审查一下元素,看看会发现什么:
React.js 把插入表达式数组里面的每一个 JSX 元素一个个罗列下来,渲染到页面上。所以这里有个关键点:如果你往 使用 map 渲染列表数据知道这一点以后你就可以知道怎么用循环把元素渲染到页面上:循环上面用户数组里面的每一个用户,为每个用户数据构建一个 JSX,然后把 JSX 放到一个新的数组里面,再把新的数组插入 const users = [ { username: 'Jerry',gender: 'female' } ] class Index extends Component { render () { const usersElements = [] // 保存每个用户渲染以后 JSX 的数组 for (let user of users) { usersElements.push( // 循环每个用户,构建 JSX,push 到数组中 <div> <div>姓名:{user.username}</div> <div>年龄:{user.age}</div> <div>性别:{user.gender}</div> <hr /> </div> ) } return ( <div>{usersElements}</div> ) } } ReactDOM.render( <Index />,document.getElementById('root') ) 这里用了一个新的数组
但我们一般不会手动写循环来构建列表的 JSX 结构,可以直接用 ES6 自带的 class Index extends Component { render () { return ( <div> {users.map((user) => { return ( <div> <div>姓名:{user.username}</div> <div>年龄:{user.age}</div> <div>性别:{user.gender}</div> <hr /> </div> ) })} </div> ) } } 这样的模式在 JavaScript 中非常常见,一般来说,在 React.js 处理列表就是用 const users = [ { username: 'Jerry',gender: 'female' } ] class User extends Component { render () { const { user } = this.props return ( <div> <div>姓名:{user.username}</div> <div>年龄:{user.age}</div> <div>性别:{user.gender}</div> <hr /> </div> ) } } class Index extends Component { render () { return ( <div> {users.map((user) => <User user={user} />)} </div> ) } } ReactDOM.render( <Index />,document.getElementById('root') ) 这里把负责展示用户数据的 JSX 结构抽离成一个组件 key! key! key!现在代码运作正常,好像没什么问题。打开控制台看看:
React.js 报错了。如果需要详细解释这里报错的原因,估计要单独写半本书。但可以简单解释一下。 React.js 的是非常高效的,它高效依赖于所谓的 Virtual-DOM 策略。简单来说,能复用的话 React.js 就会尽量复用,没有必要的话绝对不碰 DOM。对于列表元素来说也是这样,但是处理列表元素的复用性会有一个问题:元素可能会在一个列表中改变位置。例如: <div>a</div> <div>b</div> <div>c</div> 假设页面上有这么3个列表元素,现在改变一下位置: <div>a</div> <div>c</div> <div>b</div>
<div key='a'>a</div> <div key='b'>b</div> <div key='c'>c</div> 这样 React.js 就简单的通过 这里没听懂没有关系,后面有机会会继续讲解这部分内容。现在只需要记住一个简单的规则:对于用表达式套数组罗列到页面上的元素,都要为每个元素加上 在上面的例子当中,每个 ... class Index extends Component { render () { return ( <div> {users.map((user,i) => <User key={i} user={user} />)} </div> ) } } ... 再看看,控制台已经没有错误信息了。但这是不好的做法,这只是掩耳盗铃(具体原因大家可以自己思考一下)。记住一点:在实际项目当中,如果你的数据顺序可能发生变化,标准做法是最好是后台数据返回的 下一节中我们将介绍《React.js 小书 Lesson14 - 实战分析:评论功能(一)》。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |