this.state:开发中,组件肯定要与用户进行交互,React的一大创新就是将组件看成了一个状态机,一开始有一个初始状态,然后用户交互,导致状态变化,从而触发重新渲染页面
1、当用户点击组件,导致状态变化,this.setSate方法就修改状态值,每次修改以后,会自动调用this.render方法,再次渲染组件
2、可以把组件看成一个状态机,根据不同的status有不同的UI展示,只要使用setState改变状态值,根据diff算法算出有差值后,就会执行ReactDom的render方法,重新渲染界面
this.props和this.state都用于描述组件的特性,区别在于:
this.props表示那些一旦定义,就不再更改的特性;
this.state是会随着用户交互而产生改变的特性
获取真实的Dom节点:
1、在React Native中,组件并不是真实的DOM节点,而是存在于内存中的一种数据结构,叫虚拟DOM
2、只有当它插入文档后,才会变成真实的DOM
在之前的html,JavaScript中需要通过ID,className等来获取,在react native中真实的Dom节点通过ref获取
clicking(){
this.setState({
title:'变化了'
})
//获取topView还有那个Text那个节点:
this.refs.topView
this.refs.event
}
render() {
return (
<View style={styles.container}>
<View style={styles.top_topContainer} ref="topView">
<Image style={styles.Icon} source={require('./imgs/hb.jpg')}/>
<TextInput
style={styles.userStyle}
placeholder='请输入用户名'
clearButtonMode='always' //never 永远不显示删除 always 一直显示
clearTextOnFocus={true} //获取焦点时是否清空文字 、
enablesReturnKeyAutomatically={false} //是否自动启用回车键,有内容就显示,没有就不启用
returnKeyType = 'go' //回车键上的文字: go前往 join加入 next 下一项 route路线 send 发送 search 搜索
onChangeText={()=>{console.warn('用户名是...')}} //文字修改完重新给state的query赋值
/>
<TextInput
style={styles.userStyle}
placeholder='请输入密码'
clearButtonMode='always' //never 永远不显示删除 always 一直显示
clearTextOnFocus={true} //获取焦点时是否清空文字
password={true}
enablesReturnKeyAutomatically={false} //是否自动启用回车键,有内容就显示,没有就不启用
returnKeyType = 'go' //回车键上的文字: go前往 join加入 next 下一项 route路线 send 发送 search 搜索
onChangeText={()=>{console.warn('用户名是...')}} //文字修改完重新给state的query赋值
/>
</View>
<View style={styles.loginStyle}>
<TouchableOpacity onPress={()=>{this.clicking()}}>
<Text style={{textAlign:'center'}} ref="event">文章学习</Text>
</TouchableOpacity>
</View>
</View>
);
}
ref就可以获取某一个真实的dom节点