1 

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 更新，并且输入标签不会改变，

我想知道它是怎么发生的？有没有人发现密钥是如何工作的？

4

2 回答 2

4

正如@DuncanThacker 解释的那样，key它用于识别唯一元素，因此在 2 次渲染传递之间，React 知道一个元素是新事物还是更新事物。请记住，React 对每个渲染进行比较以确定 DOM 中实际发生的变化。

现在解释你看到的行为：

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

当我单击反向时，组件 Li 将挂载，输入将反向

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

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

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

你可以这样说明：

|-----------------------|---------------------|--------------------------|
|        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

于 2017-08-31T16:35:57.493 回答
0

React 使用“key”属性来确定是渲染组件的全新实例，还是更新现有实例。因此，使用 item id 作为 key 意味着该 item 的组件不会被销毁和重新创建。如果您向列表中添加一个新项目，它将创建一个新组件，如果您删除一个项目，它将破坏旧项目，但如果您更新一个项目而不更改其 ID，则该组件只会更新。

它对动态列表很有用，因为它减少了安装的组件从呈现一个列表项切换到呈现另一个列表项的奇怪情况，而实际上它应该是一个全新的组件实例。

于 2017-08-31T12:41:28.727 回答