React 键如何工作？

Question

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
	  constructor(props) {
		    super(props)
		    this.state = {
			      list: [{id: 1,val: 'aa'}, {id: 2, val: 'bb'}, {id: 3, val: 'cc'}]
		    }
	  }

	  click() {
		    this.state.list.reverse()
		    this.setState({})
	  }

	  render() {
		    return (
            <ul>
                <div onClick={this.click.bind(this)}>reverse</div>
                {
                	this.state.list.map(function(item, index) {
                		return (
                            <Li key={item.id} val={item.val}></Li>
                		)
                	}.bind(this))
                }
            </ul>
		    )
	  }
}

class Li extends React.Component{
	  constructor(props) {
		    super(props)
	  }
	  componentDidMount() {
		    console.log('===did===')
	  }
	  componentWillUpdate(nextProps, nextState) {
		    console.log('===mount====')
	  }
	  render() {
		    return (
            <li>
                {this.props.val}
                <input type="text"></input>
            </li>
		    )
	  }
}

ReactDOM.render(<App/>, document.getElementById('app'))

当我将 key 设置为item.id，并设置三个输入标签a, b, c;

当我点击反向时，组件Li将安装，输入将反向

当我将 key 更改为 时index，当我单击反向时，组件 Li 更新，并且输入标签不会更改，

我想知道这是怎么发生的？有人知道 key 是如何工作的吗？

Answer 1

正如 @DuncanThacker 所解释的，它key用于识别唯一元素，以便在两个渲染过程之间 React 知道某个元素是新元素还是更新元素。请记住，React 会比较每个渲染以确定 DOM 中实际发生的更改。

现在解释一下您所看到的行为：

当我将 key 设置为item.id，并设置三个输入标签时a, b, c；

当我点击反向时，组件Li将安装，输入将反向

当你使用idas 时，key你可以重新排序数组，但 React 只会在第一次创建并挂载节点。你正在===mount===inside输出componentWillUpdate，这就是为什么你会看到误导性的输出，但 React 只是更新节点（根据需要移动它们）。内部的状态input也会跟随每个<Li>组件到达其新位置，因为 React 正确地理解了移动的<Li> ，而不是简单地用不同的内容重新绘制。

当我将 key 更改为 时index，当我单击反向时，组件 Li 更新，并且输入标签不会改变

当您使用indexas React 时，每个渲染通道都会以相同的顺序key但具有不同的内容渲染数组，因为无论数组内容的顺序如何，每个元素都是相同的。这也是内部保持在同一位置的原因，即使标签呈现在不同的位置。这正是您不应该使用as的原因。keyindexinputvalindexkey

你可以这样说明：

|-----------------------|---------------------|--------------------------|
|        Before         |        After        |          Change          |
|-----------------------|---------------------|--------------------------|

大批：

|-----------------------|---------------------|--------------------------|
| { id: 1, val: "A" }   | { id: 3, val: "C" } | Moved from last to first |
| { id: 2, val: "B" }   | { id: 2, val: "B" } | None                     |
| { id: 3, val: "C" }   | { id: 1, val: "A" } | Moved from first to last |
|-----------------------|---------------------|--------------------------|

渲染key自index：

|-----------------------|---------------------|--------------------------|
| <Li key=0 val="A">    | <Li key=0 val="C">  | Val changed "A" to "C"   |
| <Li key=1 val="B">    | <Li key=1 val="B">  | None                     |
| <Li key=2 val="C">    | <Li key=2 val="A">  | Val changed "C" to "A"   |
|-----------------------|---------------------|--------------------------|

渲染key自item.id：

|-----------------------|---------------------|--------------------------|
| <Li key=1 val="A">    | <Li key=3 val="C">  | Moved from bottom to top |
| <Li key=2 val="B">    | <Li key=2 val="B">  | None                     |
| <Li key=3 val="C">    | <Li key=1 val="A">  | Moved from top to bottom |
|-----------------------|---------------------|--------------------------|

摘要：您应该始终使用id或其他一些唯一元素标识符作为key。

另请参阅：https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318