Being able to treat people you don't like well doesn't mean you're hypocritical, but means you're mature enough to accommodate them.
In the development work of React , you should have encountered this warning:
Warning: Each child in a list should have a unique “key” prop.
(Each child in a list should have a unique key prop.)
Here, we review the basics of React:
React elements
- React elements: Elements created through JSX or (directly calling React.createElement()) are all React elements .
- React elements are the smallest building blocks of React applications .
- Unlike a browser's DOM element, a React element is just a plain JS object with very little overhead to create.
- React elements are immutable objects . Once created, you cannot change its child elements or attributes. An element is like a single frame of a movie: it represents the UI at a specific moment.
- React elements will eventually be transformed into real DOM elements by React's virtual DOM
React's rendering render()
Whenever render() is called, the page will be re-rendered, and
React will compare the new elements with the old elements through the diffing algorithm .
The elements that have changed are found by comparison, and only the changed elements are modified, and the changes that have not occurred will not be processed.
Once a React element is created, it cannot be modified and can only be replaced by a newly created element. (Don't worry about performance here, because the diff algorithm will be used to optimize render())
Going back to the original list rendering problem, we understand the role of the key attribute : to help React identify which elements have been modified.
For the official answer, we can refer to the specific content: In-depth analysis of why the key is necessary
React introduced the key attribute. When a child element has a key, React uses the key to match both the child element on the original tree and the child element on the newest tree.
The key of an element is preferably a unique string of this element in the list. Usually, we use the id in the data as the key of the element .
For students who have not been exposed to React for a long time, we should keep in mind the golden rule of setting the key attribute. But subconsciously use the index index of the element to solve this problem. Doing so is very risky. For details, please refer to: In-depth analysis of the negative impact of using indexes as keys
Recall the characteristics of arrays, when inserting/deleting elements, it will cause a relatively large cost.
A good rule of thumb is: the elements in the map() method need to have the key attribute set.
const cars = [
{
id: 1, branch: "Benz", price: "50W" },
{
id: 2, branch: "BMW", price: "50W" },
{
id: 3, branch: "Audi", price: "50W" },
{
id: 4, branch: "BYD", price: "50W" }
]
const carItems = cars.map((item) => {
// 注意这里的key属性
return <li key={
item.id}>{
item.branch +"-"+item.price}</li>
})
Documentation for Indexed Collection Classes - Arrays
Documentation for Arrow Functions
The above content mainly comes from: React official website - List & Key , for more interesting content, it is recommended to go to the official website.