"REACT NATIVE Series Tutorial Six" override shouldcomponentupdate Specifies whether the component is redrawn

This site article isLi Himioriginal, reprint must indicate in obvious place:
reprinted from "Black Rice gamedev Block" original link:Http://www.himigame.com/react-native/2252.html

A few days ago, when Himi wrote the practiced hand project, it encountered a property value in the parent state of the child update, and when the parent was redrawn, all the child components of the parent were redrawn –-... Very awkward.

Consulted the RN documentation and finally saw the desired answer in the life cycle chapter.

Carefully read the RN about the life cycle of the children's shoes should know, that is it: shouldcomponentupdate

The official explanation for this function:

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

If you determine that the new props and state do not cause component updates, you should return false here.

if Shouldcomponentupdate returns False, Render () will not execute until the next state changes. (in addition, componentwillupdate and componentdidupdate are not called.) ）

to avoid minor bugs when state changes, but if state is always treated with caution, only from props and state in Render () Read the value, at which point you can override the Shouldcomponentupdate method to implement the alignment logic of the new old props and state.

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

So himi the following simple example to explain in detail ~

A: First Himi yourself to define a mytext component, very simple:

Import React, {appregistry, Component, Text,} from ' react-native ';  Class MyText extends Component {constructor (props) {super (props); this.state = {};}  Shouldcomponentupdate (Nextprops, nextstate) {return nextprops.mytextcontent = = = This.props.myTextContent;} Render () {return (<Text> {this.props.myTextContent} </Text>)}}module.exports = MyText;

Here a text component is wrapped in the MyText component, and the value is passed in using the parent used.

Look at this code snippet:

Shouldcomponentupdate (Nextprops, nextstate) {return nextprops.mytextcontent = = = This.props.myTextContent;}

This function is described above, in fact, if you do not write this function by default, the default is to follow the parent redraw redraw. But when you override this function, it's time to see if we return TRUE or false in this function, and if true, redraw with the parent and return false to not follow the update again.

Here Himi a logical code in this function to compare whether the value of the last parent is consistent with this one, and if it returns true consistently, the inverse returns false.

Two: Try to use the MyText code:

Import react, {  appregistry,  component,  stylesheet,  view ,  text,  touchablehighlight,} from  ' react-native ';  import MyText  from  './mytext '  class awesomeproject extends component { constructor ( Props)  { super (props);  this.state = {      refreshname &NBSP: ' Click on me to refresh the page ',     }; }   testevent () {     This.setstate ({refreshname: ' Himi '});   }   render ()  {     return  (        <View style={styles.himiViewStyle}  >          <Text style={styles.himiTextStyle}> himi react native  Tutorials  </Text>            <view style={styles.himiviewstyle}>            < touchablehighlight               Underlaycolor= ' #4169e1 '                Onpress={this.testevent.bind (This)}               >                 <Text style={styles.text} > {this.state.refreshName} </Text>             </TouchableHighlight>              <mytext  mytextcontent={ This.state.refreshname} />           </view >      </view>    )   }}; var styles = stylesheet.create ({   Text: {    color: ' #f00 ',    fontsize:20,  },   himiViewStyle:{    flex: 1,    flexDirection:  ' column ' ,    justifycontent:  ' Center ',    alignitems:  ' center ',     backgroundColor:  ' #F5FCFF ',  },  himitextstyle:{     color: ' #f00 ',    fontsize:30,    margintop:70,   });  appregistry.registercomponent (' Awesomeproject ',  ()  => awesomeproject);

The above mainly do the following functions:

1. Add a Touchablehighlight component for the response function to redraw all the components under this class.

2. Added a textual text component

3. Added the MyText component we just customized

Summarize:

1. When the response function is triggered to redraw all components, normally the contents of text or mytext should be changed to "Himi", but because MyText overrides Shouldcomponentupdate, And the last time the mytextcontent content is different from the incoming, it returns false and does not redraw the component.

2. When the second trigger response function redraws All components, the text is still redrawn, and mytext because the Shouldcomponentupdate function, the incoming mytextcontent content is the same as the last passed in (although the last time it was not redrawn, But Mytextcontent has been recorded), so returning True,mytext will also be redrawn.

The effect is as follows (click to view the dynamic graph):

650) this.width=650; "class=" Alignnone size-medium wp-image-2253 "src=" http://www.himigame.com/wp-content/uploads/ 2016/05/user25-162x300.gif "alt=" User25 "width=" 162 "height=" "style=" margin:0px;padding:1px;border:1px solid RGB (97,146,140); font-family:inherit;font-size:inherit;font-style:inherit;line-height:inherit;height:auto; "/>

More life cycle details, official link: http://reactjs.cn/react/docs/component-specs.html

This article is from the "Li Himi" blog, please be sure to keep this source http://xiaominghimi.blog.51cto.com/2614927/1783127

"REACT NATIVE Series Tutorial Six" override shouldcomponentupdate Specifies whether the component is redrawn