React Native学习总结第二天

1.0 面向组件开发

class/function都可以是“积木”（组件）

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>
         )
     }
    }

使用属性props定制“积木”（组件）

使defaultProps默认值和propTypes类型约束

  class Demo extends Component {
      static defaultProps = {
      name: ‘somebody’,   // 赋予默认值”somebody”
      }
  static propTypes = {
      name:  React.propTypes.string,   // 约定需要的类型 （为字符串）
  }
  render() {
      …….
      }
  }

defaultProps默认值和propTypes类型约束

defaultProps和propTypes写法类似（都为静态成员属性），容易 混淆
建议按英文字面意思来记忆，default 默认值， types 类型（约    束）

propTypes类型约束只在开发阶段有效，发布时会被自动移除。
编码习惯，根据需要和爱好自由取舍

2.0 变量作用域(重点)

函数内的局部变量，只能函数内读写，函数运行完后销毁（闭包除外）
class内的成员变量，在单个class的实例内读写，实例销毁时一并销毁,使用时不要忘记this.
class内的静态成员变量，在所有class的实例内共享，不会自动销毁,其他模块可通过此class访问（类public）
class外的变量，在所有class的实例内共享（公有），不会自动销毁，除非明确export，否则其他模块不可访问（类private
global全局变量，任何地方可读写（类浏览器的window），不会自动销毁

2.1 class内的成员变量写法

写法1（推荐）比较直观

class Demo extends Component {
xxx = 1;    // 注意没有声明符号var或者let
render() {
…….
    }
}

写法二

class Demo extends Component {
constructor(props) {
    super(props);  // 照抄即可，不可省略
    this.xxx = 1;    
}
render() {
…….
    }
}

3.0 动态列表与key

根据多个数据（数组）动态生成多个组件一般使用map方法注意箭头函数的返回值（有{}则必须写return）
循环生成的组件需要有唯一的key值区分（Virtual DOM）,key属性放在循环的直接容器上,优先使用区分度高的属性（id、具体内容等），其次选择数组下标,只需在当前循环中唯一不重复

4.0 为什么VIRTUAL DOM需要key

正常情况下这种情况需不要不需要key Dom都能解析成功认为状态发生了变化,就会自动触发渲染界面。

这种不需要key Dom没法根据唯一标识符去判断需要当前的局部界面是否要进行刷新。所以说VIRTUAL DOM需要key 这样能判断局部的界面是否需要进行重新绘制,最大的节约性能.