React循环渲染 - Kaiqisan

大家好，都吃了吗？我是Kaiqisan,是一个不善言辞的羞射男孩.之前学到Taro,顺便复习下React学到的知识点，今天看到了react的循环渲染，就顺道讲讲了把。

其实React的循环渲染写着比Vue麻烦一些，封装度不如Vue,但起码React的循环渲染它更加侧重使用JS方法，没有像Vue那样另辟蹊径，对JS底子比较好的同学比较友好（学习成本相对较低）

import React from 'react'
import { Link } from 'react-router-dom'

export default class Demo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            info: [
                { name: 'Kaiqisan', uid: 10001 },
                { name: 'Tommy', uid: 10002 },
                { name: 'Jimmy', uid: 10003 },
                { name: 'John', uid: 10004 }
            ]
        }
    }

    render() {
        return <div>
            { this.state.info.map((item, i) => {
                return <div key={i}>
                    <p>{item.name}----{item.uid}</p>
                </div>
            }) }
        </div>
    }
}

上面的代码就是一个简单的循环渲染的全部代码了！其核心就是使用map，(不了解js map方法的可以康康我以前的博客------------友情链接),返回一串jsx格式的数组，然后挂载到虚拟DOM中，最后渲染到页面中去。在这代码里面React会识别所有的大括号{}，然后进行模板渲染，然后返回最终结果

PS：在循环渲染的最外层的标签内，一定要有key，这是识别每一个成员的唯一标识，在DOM修改的时候，可以方便在众多相似的循环元素中找到它，实现精准地修改。

实现效果

总结

React重要的知识点，必须熟练掌握。可能有点麻烦，但是不准嫌弃。