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 这样能判断局部的界面是否需要进行重新绘制,最大的节约性能.