React Native learning summary the next day

1.0 Component-oriented development

• Any class/function can be a building block.

  class GoodMorning extends Component {
    	render() {
     		 return (
      		  <View style={styles.container}>
        		 	 <Text>Good morning</Text>
        			</View>
     	 		);
    		}
  	}
  	const GoodEvening = () => {
  	return <Text> GoodEvening </Text>
  	}
  	
  	class App extends Component {
  		render() {
  		 return (
    			<View style={styles.container}>
    	 		 	<GoodMorning	/>
      			<GoodEvening />
    			</View>
  		 )
  	 }
  	}
  Copy the code

  

• Customizing “Building Blocks” (components) using the property props

  

• Make defaultProps default and propTypes type constraints

  class Demo extends Component { static defaultProps = { name: 'somebody', // give the default "somebody"} static propTypes = {name: react.proptypes. String, // Convention required type (string)}render() {... .}}Copy the code

• DefaultProps default and propTypes type constraints

  The propTypes type constraint is only valid at development time and will be automatically removed at release time. Coding habits, according to needs and preferencesCopy the code

2.0 Variable scope (emphasis)

• Local variables inside a function can only be read and written inside the function, and destroyed after the function is run (except for closures).

• Class member variables, read and written within a single class instance, are destroyed when the instance is destroyed. Do not forget this when using this.

• Static member variables in the class are shared among all instances of the class and are not destructible. Other modules can access them through this class (class public).

• Variables outside the class, which are shared across all instances of the class (public), are not automatically destroyed and are not accessible by other modules unless export is specified (class private)

• The global variable, which can be read and written anywhere (window in the class browser), will not be destroyed automatically

2.1 Class member variable writing method

• Writing method 1 (recommended) is more intuitive

  class Demo extends Component { xxx = 1; // Notice that the var or symbol is not declaredlet
  render() {... .}}Copy the code

• Write two

  class Demo extends Component { constructor(props) { super(props); // this. XXX = 1; }render() {... .}}Copy the code

3.0 Dynamic List and Key

• Generate multiple components dynamically from multiple data (arrays). Generally, use the map method. Note the return value of the arrow function ({} must be returned).

  

• The component generated by the loop needs to have a unique Virtual DOM. The key attribute is placed on the direct container of the loop. The highly differentiated attributes (ID, specific content, etc.) are preferred, followed by array subscripts, as long as they are unique and not repeated in the current loop

  

4.0 Why does VIRTUAL DOM need keys