社区首页 >专栏 >react 列表渲染基础和技巧

react 列表渲染基础和技巧

西南_张家辉

发布于 2021-02-02 02:00:13

78300

代码可运行

文章被收录于专栏：张家辉的树屋张家辉的树屋

运行总次数：0

代码可运行

说明

适用于 react 初学者

react 列表渲染

如果现在要把这个数组里面的数据渲染页面上要怎么做？开始之前要补充一个知识。之前说过 JSX 的表达式插入 {} 里面可以放任何数据，如果我们往 {} 里面放一个存放 JSX 元素的数组会怎么样？

使用 map 去渲染列表

let icon = 'imgSrc';

const users = [
    { username: 'Alian wilison', userIcon: icon, id: 'a1' },
    { username: 'Awan killer', userIcon: icon, id: 'a2' }
];

// ---------------------
render(){
    {users.map(user => {
        return (
            <div key={user.id}>
                <img
                    src={user.userIcon}
                    alt="logo"
                    style={{
                        display: `block`,
                        width: `40px`,
                        marginRight: `15px`
                    }}
                />
                <p>{user.username}p>
            div>
        );
    })}
}
复制代码

当然你可以使用 for 循环和其他循环。


render(){
    const usersElements = [] // 保存每个用户渲染以后 JSX 的数组
    for (let user of users) {
      usersElements.push( // 循环每个用户，构建 JSX，push 到数组中
        
          姓名：{user.username}

          照片：{user.userIcon}

) } return ( {usersElements} ) }

key 非常重要

当我们需要改变 div 顺序的时候，我们都知道 react 的高效是依赖着 virtual-DOM 策略。如果我们能复用 dom 的话，尽量是不会去操作 DOM ，所以 react 使用 key 去标注这个元素。

<div>adiv>
<div>bdiv>
<div>cdiv>

// 改变一下位置

<div>adiv>
<div>cdiv>
<div>bdiv>
复制代码

如果我们不使用 key 的时候，react 能正常渲染。不过我们看看 console

<div key='a'>adiv>
<div key='b'>bdiv>
<div key='c'>cdiv>

复制代码

我们可以看到

每个渲染的列表必须要有 key ，一般在返回的 data 中使用 id 去赋值 key 值，因为这样 react 的虚拟 DOM 渲染的时候效率会高一些。一般情况下，key 必须 unique。
所以我们情况下，需要后台的接口数据带个 id 来作为 key，不过没有的话我们可以使用 index 来替代。

...
class Index extends Component {
  render () {
    return (
      <div>
        {users.map((user, i) => <User key={i} user={user} />)}
      div>
    )
  }
}
...
复制代码

当你有使用接口的时候

class Index extends Component {
    //初始化一个 list 数组
    state = {
        list:[]
    }

     dataList = async () => {
            try {
                const param = { id };
                let response = await http.get(API.datalist(), param);
                
                // 把得到数据放进 state 中
                this.state.list.push(response);
                this.setState({
                    list: response
                });
            } catch (error) {
                alert(error);
            }
        };
    
    render(){
        // 取出数据
        const { list } = list;
        return (){
            {
                // 使用 map 遍历渲染数据
                list.map(value =>{
                    
                        value.name

                    

                })
            }
            
        }
    }
}