react native之四React组件化开发

一.变量的作用域

1.函数内的局部变量,只能在函数内读写,函数运行完后销毁(闭包除外)

2.class内的成员变量,在单个class的实例内读写,实例销毁时一并销毁,使用时不要忘记前面加this

3.class内的静态成员变量,在所有class的实例内共享,不会自动销毁,其他模块可通过此class访问

4.class外的变量,在所有class实例内共享(共有),不会自动销毁.除非明确export,否则其他模块不可访问

5.global全局变量,任何地方可读写(类浏览器的window),不会自动销毁

例如:

class类的成员变量写法

第一种:

class Demo extends Component{

   a = 1;  //注意没有声明符号var或let

}

第二种:

class Demo extends Component{

     constructor(props){

           super(props);

          this.a = 1;

      }

}

 

二.动态列表与key

1.根据多个数据(数组)动态生成多个组件一般使用map方法,注意箭头函数的返回值,有{}必须写return

2.循环生成的组件需要唯一的key值区分

    (1) key属性放在循环的直接容器上

    (2) 优先使用区分度高的属性(id,具体内容) 其次选择数组下标

    (3) 只需要在当前循环中不重复

 

 

三.万物生产靠太阳,界面变化靠状态state

       (1)一切界面变化都是状态state

       (2)state的修改必须通过setState()方法 

              如 this.state.like = 100 ;这样直接赋值无效

             setState是一个merge合并的操作,只修改指定的属性,不影响其他属性

             setState数异步操作,修改不会马上生效

 

四.组件的生命周期

生命周期函数小结:

        (1)render中只做与渲染有关的操作,只读取,不修改任何数据(临时变量除外)

        (2)因为界面的更改的是经常的所以render是经常触发,所以你如果有修改数据等操作,就会多次触发,使结果难以预料,比如执行setState,那么setState又触发render,就会导致死循环

        (3)随组件只是执行一次的操作,放在willMount或者DidMount中 比如远程获取首页数据(fetch),比如弹出提示框

        (4)记得在willUnmount中销毁定时器和一些订阅事件

        (5)props发生变化使用WillReceiveprops来处理(比如将同步给state)