In this section we will discuss the React component API. We will explain the following seven methods:
- Set the state: setState
- Replace state: replaceState
- Set the properties: setProps
- Replace the property: replaceProps
- Force update: forceUpdate
- Get the DOM node: findDOMNode
- Determine the component mount status: isMounted
Set the state: setState
the setState ( Object NextState [, function the callback ])
Parameter Description
- NextState , the new state to be set, which will be merged with the current state
- Callback , optional parameter, callback function. The function will be set successfully after setState , and the component is re-rendered.
Merge nextState and the current state and re-render the component. SetState is the main method of triggering UI updates in the React event handler and in the request callback function.
About setState
You can not modify the state inside the component with this.state because the state is replaced after calling setState ().
SetState () does not immediately change this.state, but creates a state to be processed. SetState () is not necessarily synchronized, in order to improve the performance React will be batch execution DOM and DOM rendering.
SetState () always triggers component redraw once, unless some conditional rendering logic is implemented in shouldComponentUpdate ().
Examples
React instance
handleClick } > my point! Click the number of times: { this . State . ClickCount } </ h2 > ) ; } } ) ; ReactDOM . Render (
< Counter />, document . GetElementById ( ' message ' ) ) ; handleClick } > my point! Click the number of times: { this . State . ClickCount } </ h2 > ) ;
} } ) ;
ReactDOM . Render ( < Counter />,
document . GetElementById ( ' message ' ) ) ;
try it"
In the example, the click counter is incremented by clicking the h2 tag.
Replace state: replaceState
ReplaceState ( object nextState [, function callback ])
- NextState , the new state to be set, which replaces the current state .
- Callback , optional parameter, callback function. This function will be called after replaceState is set and the component is re-rendered.
replaceState () method and setState () is similar, but the method only kept nextState state, the original state is not nextState in the state will be deleted.
Set the properties: setProps
SetProps ( object nextProps [, function callback ])
- NextProps , the new property to be set, which is merged with the current props
- Callback , optional parameter, callback function. The function is called after the setProps setting is successful and the component is rendered again.
Set the component properties, and re-render the components.
Props is equivalent to the component 's data stream, which is always passed down from the parent component to all subcomponents. When integrating with an external JavaScript application, we may need to pass data to the component or notify the React.render () component that needs to be re-rendered, using setProps () .
Update the component , I can call React.render () again on the node , or change the component properties with the setProps () method to trigger the component to render again.
Replace the property: replaceProps
ReplaceProps ( object nextProps [, function callback ])
- NextProps , will set the new property, which will replace the current props .
- Callback , optional parameter, callback function. The function will be called after the replaceProps is set and the component is re-rendered.
The replaceProps () method is similar to setProps , but it will remove the original
Props
Force update: forceUpdate
ForceUpdate ([ function callback ])
Parameter Description
- Callback , optional parameter, callback function. The function is called after the component render () method call.
The forceUpdate () method causes the component to call its own render () method to render the component again, and the component's subcomponent also calls its own render (). However, when the component is rendered again, it will still read this.props and this.state, and if the state does not change, React will only update the DOM.
The forceUpdate () method applies to components such as this.props and this.state redraw (eg, modify this.state), by which the React needs to call render ()
In general, you should try to avoid using forceUpdate (), but only from this.props and this.state read the state and triggered by React render () call.
Get the DOM node: findDOMNode
DOMElement findDOMNode ()
- Return Value: DOM element DOMElement
If the component is already mounted in the DOM, the method returns the corresponding local browser DOM element. When the render return null or false when, this.findDOMNode () will return null . When reading values from the DOM, the method is useful, such as getting the value of the form field and doing some DOM operations.
Determine the component mount status: isMounted
Bool isMounted ()
- Returns: true or false indicating whether the component is mounted in the DOM
The isMounted () method is used to determine whether the component is mounted in the DOM. You can use this method to ensure that calls to setState () and forceUpdate () in an asynchronous scene do not go wrong.
