#React Native# 102状态机思维与状态机变量<3>
(2017-10-24 15:43:12)分类: 计算机相关 |
5. UI框架工作机制
});
首先将RN中所有的UI都视为一个状态机,那么任意一个UI场景就是状态机中的一种,通过函数的调用来改变状态位,并且后面用状态位的变化,重新渲染UI。比如上一节讲的TextInput
增加一个方法onChangeText = {(newText)=>this.updateNum(newText)}
然后定义updateNum这个方法,修改当前组件state,
updateNum:function(newText) {
this.setState( { inputText:newText});
}
实际上 onChangeText ={this.updateNum};也是可以的,这就是ES6带来的便利。
在改变state 时候,建议用setState,而不是this.state.属性 = 属性值;后者是同步操作,不会触发UI
刷新。
而更多的新状态的控制管理,建议用同一个大容器包含很多小的组件,小组件尽量用pureComponent,所有可以变化的状态通过props来传递。尽量减少状态机的数量。
6.React Native 组件间通信
组件间通信包括,父组件向子组件传递用props,子组件向父组件使用回调函数,同级组件之间使用监听事件。同时可以使用reducer
来管理所有通信,但是效率会低一些。
7.UI渲染过程
setState((oldState)={改变state,return
{newState}},后续更新函数);当setState改变状态变量的值之后,所有状态机变量都会被刷新。
shouldComponentUpdate (objec newxProps, object
nextState){return true/false;
}通过返回对应的true或者false,来实现是否要刷新组件。
forceUpdate(function callback)
强制刷新办法可以使组件重新渲染,不会再调用shouldComponentUpdate
方法了,但是这个函数会影响整个组件性能。
之后的组件渲染过程就是调用render方法,他必须只能返回一个可以渲染的组件描述。
8.组件成员变量
直接在const project47 = React.createClass({
_myProperty1 : 'test,
_myProperty2: true,
getInitialState:function(){}
这里面的_myProperty1,_myProperty2,getInitialState都是该组件的成员变量,通过this. 变量名
来调用。
9.同时也可以定义静态变量和静态函数。使用statics
来修饰就好了。
statics:{
_myStaticObject:'invalid
value',
myStaticMethod:
function():{}
}
render:function()
{
console.log(project47.__myStaticObject);
project47.myStaticMethod();
}