React Native学习总结第二天

1.0 面向组件开发

  • class/function都可以是“积木”(组件)

    class GoodMorning extends Component {
        render() {
             return (
                  
                     Good morning
                    
                );
            }
        }
        const GoodEvening = () => {
        return  GoodEvening 
        }
        
        class App extends Component {
            render() {
             return (
                
                    
                    
                
             )
         }
        }
    
    React Native学习总结第二天_第1张图片
  • 使用属性props定制“积木”(组件)

    React Native学习总结第二天_第2张图片
  • 使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)


    React Native学习总结第二天_第3张图片
  • 循环生成的组件需要有唯一的key值区分(Virtual DOM),key属性放在循环的直接容器上,优先使用区分度高的属性(id、具体内容等),其次选择数组下标,只需在当前循环中唯一不重复


    React Native学习总结第二天_第4张图片

4.0 为什么VIRTUAL DOM需要key

React Native学习总结第二天_第5张图片

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


React Native学习总结第二天_第6张图片

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

你可能感兴趣的:(React Native学习总结第二天)