Component
生命周期
1.初始化:
constructor 构造器
2.挂载到View树上
componentWillMount
componentDidMount
3.更新
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
4.从View树移除然后销毁
componentWillUnmount
]
Props和State
props的官方介绍:https://facebook.github.io/react-native/docs/props
Props是用来构建Component的参数,例如构建一个Image组建,我们需要传递source这个prop,prop可以是基础类型,也可以是对象类型,也可以是一个函数。对于组建来说,props是父组件传递给自己的,自己仅仅使用prop来进行渲染和处理。
state的官方介绍:https://facebook.github.io/react-native/docs/state
State是Component自己产生的由自己维护的状态,state是immutable的,在代码中不应该出现this.state.xxx = xxx这样的操作,所有的state的变更,都应该通过setState()函数来调用。
Props和State是搭配起来使用的,常见的场景是,父组件负责请求管理State,同时把自己的State作为构建子Component的Props。
RN中最常见的Component - View
编写性能更好的Component
在RN中,需要通过减少不必要的渲染(render)来提高性能,下面列举了几种常见的渲染情况。
Component的更新渲染
在默认的情况下,一个Component收到新的Props或者通过setState改变state,或者通过forceUpdate()调用强制更新。都会触发render函数进行更新,而Render函数通过JSX构造子Component,子Component收到新的Props,然后触发子Component的更新。
ShouldComponentUpdate
如果复写了shouldComponentUpdate,则在该函数返回true的情况下,才会去触发render重新渲染。
PureComponent
PureComponent与Component的唯一区别,是PureComponent有一个默认的shouldComponentUpdate实现,它的shouldComponentUpdate是通过props的对象浅比较来判断是否需要更新的。关于对象浅比较的一个简单举例:
Redux的connect带来的问题和reselect
Comments | NOTHING