3.3. React element rendering

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

Page Views: 9 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 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                《地理信息系统原理、技术与方法》 
                            
                            
                        
                             97
                        
                    
                    
                    
                        

                            
 
 
 最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289