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

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 && '