React Native Knowledge 11-Props (properties) and State (State), react11-props

Source: Internet
Author: User

React Native Knowledge 11-Props (properties) and State (State), react11-props

I. Props (attributes)

Most components can be customized using various parameters during creation. These parameters are called properties ). Props is specified in the parent component, and once specified, it will not change in the lifecycle of the specified component

By using different attributes for customization in different scenarios, you can try to improve the reuse scope of custom components. You only need to reference this. props in the render function and then process it as needed. The following is an example:

import React, { Component } from 'react';import { AppRegistry, Text, View } from 'react-native';class Greeting extends Component {  render() {    return (      <Text>Hello {this.props.name}!</Text>    );  }}class LotsOfGreetings extends Component {  render() {    return (      <View style={{alignItems: 'center'}}>        <Greeting name='Rexxar' />        <Greeting name='Jaina' />        <Greeting name='Valeera' />      </View>    );  }}AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

Ii. State)

We use two types of data to control a component: props and state. Props is specified in the parent component, and once specified, it will not change in the lifecycle of the specified component. For the data to be changed, we need to use state.

In general, you need to initialize state in constructor. In many early ES5 examples, the getInitialState method is used to initialize state, ), and then call the setState method when you need to modify it.

Suppose we need to make a text that keeps flashing. The text content is already specified when the component is created, so the text content should be a prop. The display or hidden state of the text (Rapid explicit/hidden switching produces a flickering effect) changes with time, so this state should be written to the state.

Import React, {Component} from 'react '; import {AppRegistry, Text, View} from 'react-native'; class Blink extends Component {constructor (props) {super (props); this. state = {showText: true}; // perform a counter operation on the showText status every 1000 milliseconds setInterval () => {this. setState ({showText :! This. state. showText}) ;}, 1000) ;}render () {// determines whether to display the text content let display = this. state. showText based on the current showText value? This. props. text: ''; return (<Text >{display }</Text>) ;}} class BlinkApp extends Component {render () {return (<View> <Blink text = 'I love to blink'/> <blink text = 'Yes blinking is so great'/> <Blink text = 'Why did they ever take this out of HTML '/> <Blink text = 'Look at me Look at me look at me'/> </View> );}} appRegistry. registerComponent ('blinkapp', () => BlinkApp );

Instance 2:

import React, { Component } from 'react';import { AppRegistry, Text, TextInput, View } from 'react-native';class PizzaTranslator extends Component {  constructor(props) {    super(props);    this.state = {text: ''};  }  render() {    return (      <View style={{padding: 10}}>        <TextInput          style={{height: 40}}          placeholder="Type here to translate!"          onChangeText={(text) => this.setState({text})}        />        <Text style={{padding: 10, fontSize: 42}}>          {this.state.text.split(' ').map((word) => word && '

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.