欢迎转载,请支持原创,保留原文链接:http://blog.ilibrary.me

讲props和state之前先讲3个概念,数据驱动编程、无状态编程和Virtual DOM。

数据驱动编程、无状态编程和Virtual DOM

1. 数据驱动

React是数据驱动的一种编程模式,这是一种非常优秀的思想, web server编程(后端)可以算是一种数据驱动编程模式吧,客户端请求的url、session、cookie和请求参数决定了输出啥内容,输出结果不会受到用户前后操作的影响,完全数据驱动。

有人会说用户前后操作不是会留下session, cookie吗?这些不会影响输出吗?

会的。但是session、cookie归根到底也是请求数据的一部分,而这些session、cookie数据可以是用户操作引入的,也可以是手动写入的。后端判断的是有没有session、cookie数据,而并不关心用户做过啥,没有做过啥。有没有session、cookie,这是数据。用户做过啥,没有做过啥,啥时候做过,是否重复做过,这是状态。

如果不理解的话,你先懵逼一会儿吧。

2. 无状态编程

记住数据驱动的同时请记住无状态架构,无状态架构是写入到http标准里了的,是非常优秀的一种架构,简化了应用的逻辑,剔除了那些繁琐复杂的状态管理。

客户端编程和web server(后端)相比,最麻烦的地方就在于客户端的一个窗口会有非常非常多的状态,某个按钮啥时候隐藏,啥时候显示,etc… 你得小心翼翼地处理每一个转态变化. 转态变迁都在同一个窗口里面,转态很容膨胀和混淆。

3. Virtual DOM

当然了,数据驱动还不足以让React腾飞,离开了Virtual DOM,React的输出是不完美的。 DOM的作用是帮助我们把无状态编程的输出翻译成一种有状态的结果,嗯,我相信你无法理解。Virtual DOM是一个很了不起的东西,学React Native的同学一定要了解这个东西,你可以简单理解为一个UI渲染引擎,本文不做深入讨论。

总之,有了Virtual DOM以后, 我们可以把客户端UI界面的无穷无尽的状态用无状态编程的方式写出来。吁,写客户端的程序员终于可以从那些恶心的状态变迁中解放出来了!

很多写http后端的完全无法理解客户端界面(UI, 限UI,command line是另外一回事)工作的复杂。 严格来讲,http后端页面渲染逻辑要比客户端界面简单非常非常多。

Props和State

绕了大半圈,终于讲到props和state.

先上结论:

React Native所有的UI显示和状态变化都应该有props和state决定。

如果你强制要绕过props和state手动去改变UI, 也是可以的,你高兴就好。

props和state的区别

props是外包传参,初始化的时候就已经固定了。 state是内部变量,是一个组件自己管理的动态的数据。

打个比喻,我用一个播放器播放本地文件,双击视频文件启动该播放器的时候会有一个文件名传给播放器,这个文件名就是props。

播放的过程中,窗口被调多大,用户快进到哪个地方,这些都是运行的时候产生的数据,属于state.

具体来讲,有以下几点区别:

  1. 首先, state必须是纯string类型、array或者dictionary. 而props类型是不受限的,可以是string, object, array, dictionary, function, 等等,等等…

  2. 其次, props是控件初始化时传入的,并且props是可以被设置为必选参数强制要求传入的。 state 不是外界传入的,是自己内部管理的一个转态数据容器。

    咦,怎么又出现’转态’这个词了?恩,本质上客户端页面还是有转态的,要不然用户每点一个按钮,整个界面就像网页一样闪一下,那客户端和网页还有啥区别呢?

    关键的在于’有了React Native Virtual DOM, 你就可以像写无状态应用一样写客户端了,并且写出来的还是有状态的’

    有点绕是吗?你可以理解一下web开发,web开发基本上就是无状态的,页面之间没有任何关联,页面内也没有状态变化, 但是,数据库是有转态的,数据库的状态变化导致了网页内容渲染的各种变化。而React正是通过改变state和props来渲染不同的效果.

  3. 第三,props在组件初始化之后不可变的,页面加载是由props控制的,上层组件通过调用本组件时传入不同的props值来控制初始化的界面显示。

    state是有组件自己维护,可变的,在界面首次加载以后所有的变化都应该由state来驱动。

总结

props是不可变的外部传参数,支持多数据类型。

state是可变的内部数据,自己维护,只能是基础类型(string, array, dictionary).