React native knowledge 11-props (attributes) and state (status)

1: Props (attributes)

Most components can be customized with various parameters when they are created. These parameters for customization are called props. Props are specified in the parent component, and once specified, they will not change during the life cycle of the specified component

By using different attribute customization in different scenarios, you can maximize the reuse scope of custom components. Just reference this.props in the render function and process as needed. Below 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);
2: State (state)

We use two types of data to control a component: props and state. Props are specified in the parent component, and once specified, they will not change during the life cycle of the specified component. For the data that needs to be changed, we need to use state.

In general, you need to initialize the state in the constructor. setState method.

Suppose we need to make a piece of text that keeps flashing. The text content itself is already specified when the component is created, so the text content should be a prop. The display or hidden state of the text (a fast flashing effect will produce a flashing effect) changes over time, so this state should be written to 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};

    // Invert the showText state every 1000 milliseconds
    setInterval (() => {
      this.setState ({showText:! this.state.showText});
    }, 1000);
  }

  render () {
    // Decide whether to display text content based on the current showText value
    let display = this.state.showText? 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);
Example 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 && ‘??‘). join (‘‘)}
        </ Text>
      </ View>
    );
  }
}
The above code can be used to modify the text content in the state after the input box keeps typing, and the UI is refreshed when setState is called, and the value of the text attribute in the state can be obtained with the component Text; the method constructor is a constructor To implement super according to the parameters;

Note: arrow function knowledge

ES6 allows defining functions using "arrows" (=>). The immediate function can be written as an arrow function

// example of arrow function
() => 1
v => v + 1
(a, b) => a + b
() => {
    alert ("foo");
}
e => {
    if (e == 0) {
        return 0;
    }
    return 1000 / e;
}
var f = v => v;
The arrow function above is equivalent to:

var f = function (v) {
  return v;
};
If the arrow function requires no parameters or requires multiple parameters, use parentheses to represent the parameter part.

var f = () => 5;
// Equivalent to
var f = function () {return 5};
var sum = (num1, num2) => num1 + num2;
// Equivalent to
var sum = function (num1, num2) {
  return num1 + num2;
};
If the arrow function's code block section is more than one statement, enclose them in curly braces and return using a return statement.

var sum = (num1, num2) => {return num1 + num2;}
Because braces are interpreted as code blocks, if the arrow function returns an object directly, you must put parentheses around the object.

Other related content can be found in the article introduction in ES;

React Native Knowledge 11-Props (Properties) and State (State)