3.3. React element rendering

发布时间 ： 2025-10-25 13:34:29 UTC      

Page Views: 36 views

Elements are the smallest units that make up a React application and are used to describe what is output on the screen.

const element = 
Hello, world!
;

With the browser’s DOM elements are different. Elements in React are actually ordinary objects. React DOM ensures that browsers DOM the datacontent of the React the elements are consistent.

3.3.1. Render elements into DOM

First, we add an id= “example” to a HTML page

: 
<div id="example">div>
   
 Here   div   everything in will be managed by React DOM, so we call it the “root” DOM node. 
 
 We use   React   generally, only one root node is defined when developing an application. But if you are introducing it into an existing project   React   if so, you may need to define separately in different parts   React   root node. 
 
 To set the   React   elements are rendered to the root DOM node, we pass them all to the   ReactDOM.render()   to render it to the page: 
 
 
 Example  
 
 
 
constelement=

Hello,world!
;ReactDOM.render(element,document.getElementById('example'));

 
 
 
  
 
  3.3.2.  Update element rendering  
 
   React   elements are immutable. After an element is created, you cannot change its contents or attributes. 
 
 Currently, the only way to update the interface is to create a new element and pass it in   ReactDOM.render()   methods: 
 
 Take a look at an example of this timer: 
 
 
 Example  
 
 
 
functiontick(){constelement=(
 
Hello,world!


Now it's {newDate().toLocaleTimeString()}.


);ReactDOM.render(element,document.getElementById('example'));}setInterval(tick,1000);

 
 
 
 The above examples are passed through   setInterval()   method, call once per second   ReactDOM.render()   . 
 
 We can encapsulate the part we are going to show, and the following example is represented by a function: 
 
 
 
 Example  
 
 
 
functionClock(props){return(
 
Hello,world!


Now it's {props.date.toLocaleTimeString()}.


);}functiontick(){ReactDOM.render(,document.getElementById('example'));}setInterval(tick,1000);
   
 In addition to functions, we can also create a   React.Component   the ES6 class, which encapsulates the elements to be displayed, should be noted in the   render()   method, you need to use the   this.props   replace   props   : 
  
 
 Example  
 
 
 
classClockextendsReact.Component{render(){return(


Hello,world!


Now it's {this.props.date.toLocaleTimeString()}.


);}}functiontick(){ReactDOM.render(,document.getElementById('example'));}setInterval(tick,1000);
   
 React will only update the necessary parts 
 
 It is worth noting that React DOM first compares the contents of the elements in order, while only the changed parts are updated during rendering. 
    
                    
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            3.3. React element rendering 
                        

                    

                

            
        
        

            

    
        

            

                

                    
                        
                        
                            
Principles and Applications of WebGIS 

                        
                        
                             37
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
Web框架 

                        
                        
                             942
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
WEB基础 

                        
                        
                             287
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
Principles, Technologies, and Methods of Geographic Information Systems 

                        
                        
                             102
                        
                    
                    
                        

                            
 
 
 In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress.