React Native Learning-component description and life cycle

Detailed description of the component (Component specifications)

WhenReact.createClass()you create a component by calling, you should provide anrenderobject that contains a method, and you can also include other life-cycle methods described here.

, the component life cycle can be broadly divided into three phases:

• The first stage: the first drawing phase of the component, in the above dashed box, where the component loading and initialization is completed;
• Second stage: Is the component in the run and interaction phase, the lower left corner of the box, this stage component can handle user interaction, or receive the event update interface;
• The third stage: is the component unload the extinction stage, in the bottom right corner of the dotted box, here do some cleanup work of the components.

Render

ReactComponent render()

render()method is required.

When called, it detectsthis.propsandthis.statereturns a single-level component. The child component can be a virtual local DOM component (for example<div />React.DOM.div(), or), or it can be a custom composite component.

You can also go backnullorfalseshow that you don't need to render anything. In fact, React renders a<noscript>label to handle the current differential check logic. When returnednullorfalse, itthis.getDOMNode()is returnednull.

render()The function should be purely, meaning that the function does not modify the component state, each call returns the same result, does not read and write the DOM information, and does not interact with the browser (for example, by usingsetTimeout). If you need to interact with the browser,componentDidMount()do this in the middle or other life cycle methods.render()being pure makes server-side rendering more practical and makes components easier to understand.

Getinitialstate

object getInitialState()

Called once before the component is mounted. The return value will bethis.statethe initial value.

Getdefaultprops

object getDefaultProps()

Called once when the component class is created, and then the return value is cached. If the parent component does not specify a key in props, the corresponding property in the object returned here will be mergedthis.props(using theininstrumentation property).

This method is called before any instance is created and therefore cannot be relied uponthis.props. In addition,getDefaultProps()any complex objects that are returned will be shared between instances, rather than having one copy per instance.

Proptypes

object propTypes

propTypesThe props object allows validation of the incoming to component. For morepropTypesinformation, refer to reusable components.

Mixins

array mixins

mixinArrays allow you to use blending to share behavior across multiple components. For more information on mixing, refer to reusable components.

Statics

object statics

staticsObjects allow you to define static methods that can be called on a component class. For example:

 
 
var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === ‘bar‘;
    }
  },
  render: function() {
  }
});

MyComponent.customMethod(‘bar‘);  // true

The methods defined in this block are static, meaning that you can call them before any component instances are created, and these methods cannot get the props and state of the component. If you want to check the value of props in a static method, pass props as a parameter to the static method at the call.

DisplayName

string displayName

displayNameThe string is used to output debugging information. JSX set this value automatically; Refer to JSX in depth.

Life cycle Approach

Many methods are executed at a certain point in time in the component's life cycle.

Mount: Componentwillmount

componentWillMount()

Both the server side and the client are called only once, and are called immediately before the render execution is initialized. If called within this method, the updated state will be sensed, and will besetStaterender()executed only once, although state has changed.

Mount: Componentdidmount

componentDidMount()

Called immediately after the initialization of the rendering execution, only the client is valid (the server side is not called). At this point in the life cycle, the component has a DOM representation that you can usethis.getDOMNode()to get the corresponding DOM node.

If you want to integrate with other JavaScript frameworks, usesetTimeouteithersetIntervalto set timers, or to send AJAX requests, you can perform these operations in this method.

Attention:

In order to be compatible with the V0.9,dom node as the last parameter passed in. You can stillthis.getDOMNode()get the DOM node by getting it.

Updated: Componentwillreceiveprops

componentWillReceiveProps(object nextProps)

Called when the component receives a new props. The method is not called when the rendering is initialized.

This function can be used as an opportunity for react to update the state before rendering after prop is passed inrender(). The old props can bethis.propsobtained by getting to. Calls in this functionthis.setState()will not cause a second render.

 
componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

Attention:

For state, there is no similar method:componentWillReceiveState. The prop that will be passed in May cause the state to change, or vice versa. If you need to perform some action when state changes, usecomponentWillUpdate.

Updated: shouldcomponentupdate

boolean shouldComponentUpdate(object nextProps, object nextState)

Called before a new props or state is received and will be rendered. This method is not invoked when initializing the render,forceUpdatenor when using the method.

This should be true if the new props and state are determined not to cause component updates返回 false.

 
 
shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

IfshouldComponentUpdatefalse is returned, itrender()will not be executed until the next state changes. (Also,componentWillUpdateandcomponentDidUpdatewill not be called.) ）

By default, itshouldComponentUpdatealways returns true,stateavoiding minor bugs when changing, but if you are always careful to take asstateimmutable,render()only frompropsandstateread values in, at which point you can override theshouldComponentUpdatemethod to implement the new old PR The comparison logic of OPS and state.

If performance is a bottleneck, especially when there are dozens of or even hundreds of components, useshouldComponentUpdatecan improve the performance of your application.

Updated: componentwillupdate

componentWillUpdate(object nextProps, object nextState)

Called immediately before a new props or state is received. The method is not called when the rendering is initialized.

Use this method to do some preparatory work before updating.

Attention:

You cannot use it in just the methodthis.setState(). If you need to update state to respond to a change in a prop, use thecomponentWillReceiveProps.

Updated: componentdidupdate

componentDidUpdate(object prevProps, object prevState)

is called immediately after the component's update has been synchronized to the DOM. This method is not called when the rendering is initialized.

Use this method to manipulate DOM elements after a component update.

Attention:

The V0.9,dom node is passed in as the last parameter for compatibility. If you use this method, you can still use itthis.getDOMNode()to access the DOM node.

Removal: Componentwillunmount

componentWillUnmount()

Called immediately when the component is removed from the DOM.

Perform any necessary cleanup in the method, such as an invalid timer, or clear thecomponentDidMountDOM element created in.

React Native Learning-component description and life cycle