今天,我来说下RN里的Props和State属性,以及render()方法。
首先,我说下render()方法的作用,render()的作用是渲染组件。即,把文件里写的组件、样式等通过该方法更新到界面上来。
Props,大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。比如Image的source属性,TextInput的placeholder属性等等。
另外,自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props。
我们使用两种数据来控制一个组件:props和state。props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。 对于需要改变的数据,我们需要使用state。
一般来说,你需要在constructor中初始化state(译注:这是ES6的写法,早期的很多ES5的例子使用的是getInitialState方法来初始化state,这一做法会逐渐被淘汰),然后在需要修改时调用setState方法。上面截图的例子也是一个定时展示和隐藏文字的例子。
在写此部分例子的时候,还有一点值得注意的地方,就是此段代码:state.text.split(' ').map((word)=>word&&'🍕'),一般在我们的逻辑中“&&”代表逻辑与,只有当前后都为真的情况下,返回真,而这里它是一个执行语句,先执行&&前面的语句,如果为真,执行&&后面的语句,返回结果也是&&后面的执行结果。
Props和State就先说到这,下一篇我来说说Flexbox布局。