React Native

class / function 都可以是 "積木" (組件)

import React, {Component} from 'react'
import {Text,View} from 'react-native'

// 類
class GoodMorning extends Component {
    render() {
        return (
            <Text>
                Good morning
            </Text>
        );
    }
}

// 函數(shù)
const GoodEvening = () => {
    return (
        <Text>
            Good evening
        </Text>
    );
}

class App extends Component {
    render() {
        return (
            <View>
                <GoodMorning />
                <GoodEvening />
            </View>
        );
    }
}

使用屬性props定制"積木"(組件)

// 類
class GoodMorning extends Component {
  render() {
    return (
      <Text>
        Good morning {this.props.name}!
      </Text>
    );
  }
}

// 函數(shù)
const GoodEvening = (props) => {
  return (
    <Text>Good evening {props.name}</Text>
  );
}

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <GoodMorning name="Sir"/>
        <GoodEvening name="Madam"/>
      </View>
    )
  }
}

defaultProps默認(rèn)值和propTypes類型約束

class Demo extends Component {

  static defaultProps = {
    name: 'somebody', // 賦予默認(rèn)值'somebody'
  }

  static propTypes = {
    name: React.propTypes.string, // 約定需要的類型(為字符串)
  }

  render() {
        ...
  }

}

• defaultProps和propTypes寫法類似(都為靜態(tài)成員屬性),容易混淆
  • 建議按英文字面意思來記憶周伦，default默認(rèn)值勘高，types類型(約束)
• propTypes類型約束只在開發(fā)階段有效览妖，發(fā)布時(shí)會(huì)被自動(dòng)移除。
  • 編碼習(xí)慣礼患，根據(jù)需要和愛好自由取舍。

變量作用域

• 函數(shù)內(nèi)的局部變量，只能函數(shù)內(nèi)讀寫伪节，函數(shù)運(yùn)行完后銷毀(閉包除外)
• class內(nèi)的成員變量，在單個(gè)class的實(shí)例內(nèi)讀寫绩鸣，實(shí)例銷毀時(shí)一并銷毀
  • 使用時(shí)不要忘記this
• class內(nèi)的靜態(tài)成員變量怀大，在所有的class的實(shí)例內(nèi)共享，不會(huì)自動(dòng)銷毀呀闻。
  • 其他模塊可通過此class訪問(類public)
• class外的變量化借，在所有class的實(shí)例內(nèi)共享(共有),不會(huì)自動(dòng)銷毀
  • 除非明確export，否則其他模塊不可訪問(類private)
• global全局變量捡多，任何地方可讀寫(類瀏覽器的window)蓖康，不會(huì)自動(dòng)銷毀

class內(nèi)的成員變量寫法

// class類寫聲明的東西，不能寫完整的語句
class Demo extends Component {
    xxx = 1; // 注意沒有聲明符號var或者let
    render() {
        ...
    }
}

// 和上面是同樣的效果
class Demo extends Component {

    constructor(props) {
        super(props); // 照抄即可垒手，不可省略
        this.xxx = 1;
    }

    render() {
        ...
    }
}

動(dòng)態(tài)列表與key

• 根據(jù)多個(gè)數(shù)據(jù)(數(shù)組)動(dòng)態(tài)生成多個(gè)組件一般使用map方法
  • 注意箭頭函數(shù)的返回值(有{}則必須寫return)
• 循環(huán)生成的組件需要有唯一的key值區(qū)分(Virtual DOM)
  • key屬性放在循環(huán)的直接容器上
  • 優(yōu)先使用區(qū)分度高的屬性(id蒜焊，具體內(nèi)容等)，其次選擇數(shù)組下標(biāo)
  • 只需在當(dāng)前循環(huán)中唯一不重復(fù)
    在不添加大括號的時(shí)候科贬，箭頭函數(shù)會(huì)默認(rèn)return語句