JSX syntax rules

What happens after creating a functional component (execute React. Render (, document.getelementByid (‘test’))

What happens after creating the class component (execute React. Render (, document.getelementByid (‘test’)))

4. CreateRef needs to be accessed with Current

Five, the role of key

<! DOCTYPE HTML >< HTML >< head> <meta charset="UTF-8"> <title> <body> <div id="test"></div> <! <script type="text/javascript" SRC =".. /js/react.development.js"></script> <! <script type="text/javascript" SRC =".. /js/react-dom.development.js"></script> <! <script type="text/javascript" SRC =".. /js/babel.min.js"></script> <script type="text/ Babel "> (What's the inner workings of Key?) 2). Why is it best not to use index for key when iterating through a list? 1). To put it simply: The key is the identification of the virtual DOM object and plays an extremely important role in updating the display. 2). When the data in the state changes, React generates a new virtual DOM based on the new data. Then React makes a diff comparison between the new virtual DOM and the old virtual DOM. The same key is found in the old virtual DOM as in the new virtual DOM: (1). If the content in the virtual DOM remains unchanged, use the previous real DOM (2) directly. If the content in the virtual DOM changes, a new real DOM is generated, which then replaces the previous real DOM b. in the page. The old virtual DOM does not have the same key as the new virtual DOM. Create a new real DOM based on the data and render it to the page 2. Using index as key may cause the following problems: 1. If the data is added in reverse order, deleted in reverse order and other operations out of order, unnecessary real DOM updates will be generated. 2. If the structure also contains input class DOM: error DOM update ==> interface problems. 3. Pay attention! It is ok to use index as key if there is no order breaking operation such as adding or deleting data in reverse order and only used for rendering list for display. 3. How to select key in development? 1. It is better to use the unique identifier of each piece of data as the key, such as ID, mobile phone number, ID number, student number and other unique values. 2. If you are sure to simply display data, use index. {id:1,name:' xiao Zhang ',age:18}, {id:2,name:' Xiao Li ',age:19}, initial virtual DOM: < li key = 0 > zhang - 18 < input type = "text" / > < / li > < li key = 1 > xiao li - 19 < input type = "text" / > < / li > updated data: {id: 3, name: "wang", the age: 20}, {id: 1, name: 'xiao zhang, age: 18}, {id: 2, name: xiao li, age: 19}, update the data after the virtual DOM: < li key = 0 > wang - 20 < input type = "text" / > < / li > < li key = 1 > zhang - 18 < input type = "text" / > < / li > < li key = 2 > xiao li - 19 < input Type = "text" / > < / li > -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- slow-motion replay - use id uniquely identifies as a key initial data: {id: 1, name: 'xiao zhang, age: 18}, {id: 2, name: xiao li, age: 19}, the initial virtual DOM: < li key = 1 > zhang - 18 < input type = "text" / > < / li > < li > key = 2 a: xiao li - 19 < input type = "text" / > < / li > updated data: {id: 3, name: "wang", the age: 20}, {id: 1, name: 'xiao zhang, age: 18}, {id: 2, name: xiao li, age: 19}, update the data after the virtual DOM: < li key = 3 > wang - 20 < input type = "text" / > < / li > < li key = 1 > zhang - 18 < input type = "text" / > < / li > < li key = 2 > xiao li - 19 < input Type ="text"/></li> */ class Person extends react.component {state = {persons:[{id:1,name:' id ',age:18}, {id: 2, name: xiao li, age: 19}, } add = ()=>{const {persons} = this.state const p = {id:persons +1,name:' 王',age:20} This. SetState ({persons:[p,...persons]})} render(){return (<div> <h2> </h2> <button </h3> <ul> {this.state.persons.map((personObj,index)=>{return <li key={index}>{personObj.name}---{personObj.age}<input type="text"/></li> }) } </ul> <hr/> <hr/> <h3> uses id (the unique identifier of the data) as the key</h3> <ul> {this.state.persons.map((personObj)=>{return <li key={personObj.id}>{personObj.name}---{personObj.age}<input type="text"/></li> }) } </ul> </div> ) } } ReactDOM.render(<Person/>,document.getElementById('test')) </script> </body> </html>Copy the code