For the role of key in react, the official did not give a detailed interpretation, only mentioned in the list need to assign a key to distinguish each record, http://blog.csdn.net/code_for_free/article/details/ 50514259 explains key usage scenarios, http://taobaofed.org/blog/2016/08/24/react-key/ From three aspects, the reason of the existence of key in the list component and the use of key as trick to simplify the code logic, this article takes the new element in list as an example to analyze the function of the update scheme and key which can be used from the call angle of the life cycle function of the list sub-component. It is generally assumed that when a REACT element contains a number or sequence of indeterminate child elements, the key property needs to be provided to locate whether the element already exists. In practice, it can be assumed that key is an interface for which elements are created and which elements are deleted. For example, a list is available, and each component is added with an ID to the back end of the request (the function should be placed in theDidmount.), the status of the current ID array is [0,1], how to become [2,3,0] on the original basis, there are several ways to do this: 1, delete the original array, and then add 3 elements, respectively, set to 2,3,0. There is no need to use key to identify whether an element exists, which is obviously inefficient, and it can have side effects (Init,didmount,willumount will be called in the life cycle) ,2, add an element directly to the back, and the values are set to 2,3,0. No key, subscript with array, last element 0 is new, need to call component (Init,didmount），the Didmount received 0 andSend back the request 3, by value lookup, to 0 remains unchanged, delete 1, add 2, 3, which conforms to the logic we want, but we have not told the react value is what, the list may be a complex component, so react provides a key, Let's set this up ourselves when the element needs to be re-mounted. Here's a look at one of the application scenarios click on the button on the interface Add item, add a record in the list below, record the ID of the console output itself at the time of the mount, the array of data is in chronological order, the view displays the import React, in reverse order of time, {Component} from ' React '; Class Item extends Component {
Componentdidmount () {
Console.log (This.props.text);
}
Render () {
Return (<li>{this.props.text}</li>)
}}; Class App extends Component {
Constructor () {
Super ()
this.state={arr:[0,1]};
This.additem=this.additem.bind (This)
}
AddItem () {
var arr=this.state.arr.slice (0);
Arr.push (arr.length);
This.setstate ({Arr:arr});
}
Render () {
var arr=this.state.arr.slice (0);
Arr.reverse ();
Return (
<div classname= "APP" >
<button Onclick={this.additem}>add item</button>
<ul>
{Arr.map ((item,index) =>{return <item Key={index} text={item}/>})}
</ul>
</div>
);
}
}
Export default App;when no key or Key={index} is set in the app's render, each newly mounted node is 0 (the other node can be detected in willreceiveprops), because the last element after the reverse order is 0, This element has no previous key, so add a new node. To achieve your goals, you need toSettings in the app's renderKey={arr.length-index} (because the array of this example is simple, set Key={item} is also possible), tell react that the corresponding position does not need to be mounted again. PS: Fast new react program with Create-react-app very convenient, without configuration can use Hot update, how to use: Https://github.com/facebookincubator/create-react-app
The role of key in react
