react 列表渲染基础和技巧

说明

• 适用于 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 到数组中
        <div key={user.id}>
          <div>姓名：{user.username}</div>
          <div>照片：{user.userIcon}</div>
          <hr />
        </div>
      )
    }

    return (
      <div>{usersElements}</div>
    )
}

key 非常重要

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

<div>a</div>
<div>b</div>
<div>c</div>

// 改变一下位置

<div>a</div>
<div>c</div>
<div>b</div>

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

<div key='a'>a</div>
<div key='b'>b</div>
<div key='c'>c</div>

我们可以看到

• 每个渲染的列表必须要有 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 =>{
                    <div key={value.id}>
                        <p>value.name</p>
                    </div>
                })
            }
            
        }
    }
}