In this section we will discuss the React component API. We will explain the following seven methods:
Set status:
setStateReplacement status:
replaceStateSet the properties:
setPropsReplace attributes:
replacePropsForce updates:
forceUpdateGet the DOM node:
findDOMNodeDetermine the mount status of the component:
isMounted
3.11.1. Set status: setState ¶
setState(object nextState[, function callback])
Parameter description ¶
nextStatenew state to be set, which will be the same as the currentstatemerge.callbackoptional parameters, callback function. The function will be found in thesetStateset 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
-
1. Geographical Information Systems in the World Wide Web Era
4
-
2. Basic technology of WebGIS
4
-
3. Geographic Web Services
5
-
4. aggregation of geographical information
4
-
5. mobile GIS
5
-
6. Geographic information portal
3
-
7. New generation national spatial data infrastructure and GIS
4
-
8. Application of WebGIS in E-Commerce
3
-
9. Application of WebGIS in E-government
3
-
10. Hotspots and frontiers of WebGIS
2
-
1. Angularjs2
8
-
1. SVG tutorial
19
-
1. Memcached
20
-
1. C# tutorial
61
-
1. Sqlite
47
-
2. Go
43
-
2. Docker
59
-
2. Vue3
19
-
2. Servlet
21
-
3. React
23
-
3. SOAP tutorial
10
-
3. Android
18
-
3. Mongodb
44
-
3. Kotlin
18
-
4. Lua
31
-
4. MySQL tutorial
34
-
4. Appml
12
-
5. Perl
45
-
5. Postgresql
41
-
web
15
-
5. Web Services tutorial
6
-
6. Ruby
41
-
6. Design-pattern
35
-
7. Django
18
-
7. Rust
22
-
6. WSDL tutorial
8
-
8. Foundation
39
-
9. Ios
43
-
8. Css3
26
-
9. Swift
43
-
11. HTML tutorial-(HTML5 Standard)
54
-
12. Http
6
-
13. Regex
6
-
14. Regexp
7
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.
-
1. Introduction to Geographic Information Systems
6
-
2. From the Real World to the Bit World
3
-
3. Spatial Data Model
7
-
4. Spatial Reference Systems and Map Projections
5
-
5. Data in GIS
4
-
6. Spatial data acquisition
2
-
7. Spatial Data Management
6
-
8. Spatial analysis
8
-
9. Digital Terrain Model (DTM) and Terrain Analysis
5
-
10. Spatial modeling and spatial decision support
6
-
11. Spatial data representation and map making
6
-
12. 3S Integration Technology
5
-
13. Network Geographic Information System
4
-
14. Examples of Geographic Information System Application
8
-
15. Organization and Management of Geographic Information System Application Projects
10
-
16. Geographic Information system Software Engineering Technology
7
-
17. Geographic Information System Standards
3
-
18. Geographic Information System and Society
3
-
19. Earth Information Science and Digital Earth
4