乐趣区

关于react.js:React的列表组件必须要有key

jiezi
一、列表组件没有 key 属性会 warning？
1、key 进步性能

当创立列表组件时，必须给每一个元素设置 key 属性，否则会有正告：a key should be provided for list items。如果元素没有 key 属性，React 很难判断元素应该怎么渲染？如果元素有 key 值，那么 React 只对匹配 key 值的元素，进行更改等渲染操作，这样极高晋升了运行性能。

二、列表组件应用阐明
1、谬误用法 
function ListItem(props) {
    const value = props.value;
    return (
        // 谬误！你不须要在这里指定 key：<li key={value.toString()}>
            {value}
        </li>
    );
}

function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
        // 谬误！元素的 key 应该在这里指定：<ListItem value={number} />
    );
    return (
        <ul>
            {listItems}
        </ul>
    );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(<NumberList numbers={numbers} />,
    document.getElementById('root')
);
2、正确用法 
function ListItem(props) {
    // 正确！这里不须要指定 key：return <li>{props.value}</li>;
}

function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
        // 正确！key 应该在数组的上下文中被指定
        <ListItem key={number.toString()} value={number} />
    );
    return (
        <ul>
            {listItems}
        </ul>
    );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(<NumberList numbers={numbers} />,
    document.getElementById('root')
);
3、key 值无奈读取

key 值会传递给 React，但不会传递给组件。如果须要应用 key 值，请用其余属性 (譬如 id)：

# Post 组件能够读出 props.id，然而不能读出 props.key
const content = posts.map((post) =>
    <Post
        key={post.id}
        id={post.id}
        title={post.title} />
);
4、唯一性

key 在兄弟节点间必须惟一，但全局不须要惟一。

function Blog(props) {
    const sidebar = (
        <ul>
            {props.posts.map((post) =>
                <li key={post.id}>
                    {post.title}
                </li>
            )}
        </ul>
    );
    const content = props.posts.map((post) =>
        <div key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
        </div>
    );
    return (
        <div>
            {sidebar}
            <hr />
            {content}
        </div>
    );
}

const posts = [{ id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
    {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(<Blog posts={posts} />,
    document.getElementById('root')
);
参考文档
  • React 的列表组件必须要有 key？
退出移动版