认识RN中的state
@在RN中,系统会持续监控state,组件用state作为数据来源,当state属性值发生改变时,组件就会发生重绘,触发render()方法,渲染UI界面。数据变化后调用this.setState()改变state属性值来更新界面(非及时)。
$state是做什么的
1、主要是用于存储组件自身需要的数据,是组件私有的数据
2、一般通过修改state属性的值来更新数据
3、状态更新是数据合并的过程
$组件什么时候使用state
1、处理用户输入
2、网络数据获取
3、定时更新
4、消息推送等不可预知状态改变的组件
$state的使用规则
1、state任何属性的改变都会导致页面重绘,所以封装可复用组件时应尽量使用props通过组件将数据传到内部
2、在state中,变量是通过计算得到的,使用的时候重新计算,否则就删掉
3、在UI中,可变变量只能是state
4、若要在组件中增加子组件,不要写到state中,应直接写在render方法中
$如何修改state的属性值
this.setState(upDater, callback);
// 参数一:可以是个函数或对象
this.setState({
autoPlay: true
})
// 如果后面的状态依赖于之前的状态,建议使用 updater 函数(props.step)
this.setState((preState) => {
return : preState.number + 1;
})
// 参数二:除非 shouldComponentUpdate() 方法返回 false,setState() 将永远都会引发重新渲染,若shouldComponentUpdate() 方法返回false,通常使用官方推荐的componentDidUpdate()方法
$单向数据流
父组件和子组件不能通过state交互,都是私有的。父组件可以通过state来改变子组件的props。任何有state驱动的数据只会影响到该组件的子组件
<ItemContent onChange={this._textChange.bind(this)} />
_textChange(title,width, height){
let msg = this.state.msg;
// 这里可以处理一些业务逻辑
if(title!= ''){
this.setState({
msg: title
})
}
this.setState({
width:width,
height:height
})
}
class ItemContent extends Component {
constructor(props){
super(props);
this.state = {
msg: '原来的值',
onChange: this.props.onChange,
}
}
_textChange(event){
this.setState({
msg: '封装的一个组件'
})
if(this.state.onChange === 'function'){
this.state.onChange(this.props.title, this.event.contentSize.width,this.event.contentSize.height)
}
}
render(){
return (
<View>
<TextInput
……
title = {'属性'}
onChange = {this._textChange.bind(this)}
/>
</View>
)
}
}
认识RN中的props
@在RN中props在父组件中指定的,在整个生命周期中不会改变,父组件传递给子组件
可以通过声明defaultProps指定默认值,声明propTypes可以控制属性类型,但是在正式发布的app中propTypes不会进行属性检查
// 父组件的属性值们
let params = {name: '小红', age: '18', msg: '父组件的属性'}
<Component {...params} />
// 子组件取值
render(){
let {name, msg} = params
<View>
<Text>{name} {msg}</Text>
</View>
}