React.js 密钥生成

Question

我对使用一组密钥（没有重复项）的协调算法有疑问。代码片段类似于示例： `

var ResourceTable = React.createClass({
    getInitialState: function() {
        return {data: [{"rid": "Ciao ", "id": 10}, {"rid": "Mondo!", "id": 2}]};
    },
    componentDidMount: function() {
        self = this;
        self.setState({data: [{"rid":"first", "id": 3},{"rid":"second", "id": 1},{"rid":"third", "id": 2}]});
    },
    render: function() {
        var commentNodes = this.state.data.map(function (resource, index) {
            return (
                <Resource key={resource.id} rid={resource.rid}/>
            );
        });

        return(
            <table>
                {commentNodes}
            </table>
        );
    }
});

` 第一次渲染对象时一切正常（对于 resource.id 的每个值）。第二次出现无人看管的行为：有时每个元素都正确呈现，有时却没有，我做了很多尝试，但找不到解释。导致错误的情况是：

第一个渲染键：[10,2]
第二次渲染键：[3,1,2]

结果是第二次渲染时只渲染了两个元素

Answer 1

如果渲染 HTML 在浏览器中发生变化，React 会非常敏感。 <table>就是这种情况，可以这样创建：

<table>
    <tr><td>Cell</td></tr>
</table>

但实际上浏览器正在将其更改为：

<table>
    <tbody>
        <tr><td>Cell</td></tr>
    </tbody>
</table>

此操作后 DOM 和 React Virtual DOM 不同并触发像您一样的错误。要修复它，只需更改：

return (
    <table>
        {commentNodes}
    </table>
);

进入：

return (
    <table>
        <tbody>{commentNodes}</tbody>
    </table>
);

React.js 密钥生成

React.js key generation

hashmap

key

reactjs