Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "what is the role of key in react", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what is the role of key in react" can help you solve your doubts.

The function of key in react is to determine whether the element is newly created or moved in the diff algorithm, so as to reduce unnecessary diff, that is, to improve the efficiency of diff peer comparison and avoid the side effects of in-situ reuse; key is the identity used by react to track the elements of the list that have been modified, added or deleted.

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

What's the use of react's key?

Action

Like Vue, React also has a diff algorithm, and the key attribute of an element is used to determine whether an element is newly created or moved, thereby reducing unnecessary Diff

In react's diff algorithm, react uses the key of an element to determine whether the element is newly created or moved, thus reducing unnecessary element rendering. In addition, react has to judge the relationship between the element and the local state according to the key.

To put it simply, it is to improve the efficiency of peer comparison of diff and avoid the side effects of in-situ reuse.

Both vue and react themselves adopt diff's algorithm vue adopts a finer-grained update component approach, that is, listening for each attribute binding

React adopts a top-down update strategy, each small change will generate a new vdom, thus diff, if you do not write key, it will be updated but not updated

What is key?

Key is an auxiliary tag that react uses to track which list elements have been modified, added, or deleted. During the development process, we need to ensure that the key of an element is unique among its siblings.

If you insert a piece of data after the data in the list data rendering, key is not very useful, as follows:

This.state = {numbers: [111222333]} insertMovie () {const newMovies = [... this.state.numbers]; this.setState ({movies: newMovies})} {this.state.movies.map ((item, index) = > {return {item}})}

The previous element is in the diff algorithm. Because the previous element is exactly the same, it does not generate a delete creation operation. In the last comparison, it needs to be inserted into the new DOM tree.

Therefore, in this case, whether the element has a key attribute or not does not make much sense.

Let's take a look at the difference between using key and not using key when inserting data earlier:

InsertMovie () {const newMovies = [000,... this.state.numbers]; this.setState ({movies: newMovies})}

When you have key, react matches the child elements on the original tree and the child elements on the latest tree according to the key attribute. As in the case mentioned above, you only need to insert the 000 elements in the front position.

When there is no key, all li tags need to be modified

Similarly, having a key value does not mean higher performance. If only the text content has changed, the performance and efficiency will be higher if you do not write key.

Mainly because not writing key is to replace all the text content, the node will not change.

On the other hand, writing key involves adding and deleting nodes. If you find that the old key does not exist, it will be deleted. If the new key is not available before, it will be inserted, which increases the performance overhead.

Summary

Good use of the key property is a critical step in performance optimization, with the following considerations:

Key should be the only one.

Key do not use random values (random numbers will regenerate a number the next time render)

Avoid using index as key

The process for react to judge key is as follows:

After reading this, the article "what is the role of key in react" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.