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

44次阅读

共计 1637 个字符，预计需要花费 5 分钟才能阅读完成。

一、列表组件没有 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')
);