3.11. React component API

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

Page Views: 10 views

In this section we will discuss the React component API. We will explain the following seven methods:

  • Set status: setState

  • Replacement status: replaceState

  • Set the properties: setProps

  • Replace attributes: replaceProps

  • Force updates: forceUpdate

  • Get the DOM node: findDOMNode

  • Determine the mount status of the component: isMounted

3.11.1. Set status: setState 

setState(object nextState[, function callback])

Parameter description

  • nextState new state to be set, which will be the same as the current state merge.

  • callback optional parameters, callback function. The function will be found in the setState set up successfully and the component is called after re-rendering.

Merge nextState and current state and re-render the component setState is the main way to trigger UI updates in React event handlers and request callbacks.

About setState

Cannot be passed within the component this.state modify the state because it will be called setState() and then replaced.

setState() doesn’t change immediately. this.state instead, create a soon-to-be processed state . setState() it is not necessarily synchronous, and React will execute in batches to improve performance. state and DOM rendering.

setState() always triggers a component redrawing, unless in the shouldComponentUpdate() some conditional rendering logic is implemented in.

Example

3.11.2. React instance 

classCounterextendsReact.Component{constructor(props){super(props);this.state= {clickCount:0};this.handleClick=this.handleClick.bind(this);}handleClick() {this.setState(function(state){return{clickCount:state.clickCount+1};});}render() {return(Click me! The number of clicks is:{this.state.clickCount});}} ReactDOM.render(,document.getElementById('example'));    
 In the example, the click counter is increased by 1 by clicking the H2 tab. 
  
 
  3.11.3.  Replacement status:   replaceState    
 
 
 
replaceState(object nextState[, function callback]) 
 
 
 
     
  •  
       nextState   the new state to be set, which replaces the current   state   . 
     
    •  
  •  
       callback   optional parameters, callback function. The function will be found in the   replaceState   set up successfully and the component is called after re-rendering. 
     
    •  
 
   replaceState()   methods and   setState()   similar, but the method only retains   nextState   in state, original   state   not here   nextState   all the states in the are deleted. 
 
 
 
  3.11.4.  Set property: setProps  
 
 
 
setProps(object nextProps[, function callback]) 
 
 
 
     
  •  
       nextProps   the new property to be set, the state will be the same as the current   props   merge 
     
    •  
  •  
       callback   optional parameters, callback function. The function will be found in the   setProps   set up successfully and the component is called after re-rendering. 
     
    •  
 
 Set the component properties and re-render the component. 
 
   props   is equivalent to the data flow of a component, which is always passed down from the parent component to all child components. When integrating with an external JavaScript application, we may need to pass data or notification to the component   React.render()   components need tobe re-rendered, and you can use the   setProps()   . 
 
 Update the component so that I can call it again on the node   React.render()   can also be done through   setProps()   method to change the properties of the component and trigger the component to re-render. 
 
 
 
  3.11.5.  Replace attributes:   replaceProps    
 
 
 
replaceProps(object nextProps[, function callback]) 
 
 
 
     
  •  
       nextProps   the new property to be set, which replaces the current   props   . 
     
    •  
  •  
       callback   optional parameters, callback function. The function will be found in the   replaceProps   set up successfully and the component is called after re-rendering. 
     
    •  
 
   replaceProps()   methods and   setProps   similar, but it deletes the original   props   . 
 
 
 
  3.11.6.  Force updates:   forceUpdate    
 
 
 
forceUpdate([function callback]) 
 
 
 
 
 Parameter description  
 
     
  •  
       callback   optional parameters, callback function. This function will be used in the component   render()   called after the method is called. 
     
    •  
 
   forceUpdate()   method causes the component to call its own   render()   method to re-render the component, and the component’s child components also call their own   render()   . However, when the component renders again, it still reads the   this.props   and   this.state   if the state does notchange, React will only update the DOM 
 
   forceUpdate()   method is applicable to   this.props   and   this.state   redraw components other than (e. G. modified   this.state   . This method notifies React that it needs to call   render()   
 
 Generally speaking, you should try to avoid using   forceUpdate()   and only from   this.props   and   this.state   read the status in and triggered by React   render()   call. 
 
 
 
 
  3.11.7.  Get DOM node: findDOMNode  
 
 
 
DOMElement findDOMNode() 
 
 
 
     
  •  
     Return value: DOM element   DOMElement   
     
    •  
 
 If the component is already mounted in DOM, the method returns the corresponding local browser DOM element. When   render   return   null   or   false   hour   this.findDOMNode()   will also return   null   . Thismethod is useful when reading values from DOM, such as getting the value ofa form field and doing some DOM operations. 
 
 
 
  3.11.8.  Determine the mount status of the component: isMounted  
 
 
 
bool isMounted() 
 
 
 
     
  •  
     Return value:   true   or   false   indicating whether the component has been mounted into the DOM 
     
    •  
 
   isMounted()   method is used to determine whether the component has been mounted into the DOM. You can use this method to ensure   setState()   and   forceUpdate()   calls in asynchronous scenarios do not go wrong. 
 
 This article refers to:  http://itbilu.com/javascript/react/EkACBdqKe.html  
 
  
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            3.11. React component API 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

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

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

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289