React 基础之props和state
- 在class 关键字创建的组件中,如果想使用外界传来的props参数,不许接收,直接通过this.props.***来访问即可
- 注意无论是class 还是普通的function创建的组件,它们的props都是只读的
- 另外注意 :class创建的组件,是有自己的私有属性和生命周期函数,
而function创建的组件,只有props,没有自己的私有数据和生命周期函数。 - class组件继承了Component组件后,必须在构造器里调用super(),只有调用了super()后,才能使用this关键字
constructor(){
super()
this.state={}
}
* 在class创建的组件中,this.state都是可读可写的
而props都是只读的,不能被重新赋值
* 如果一个组件需要有自己的私有数据,则推荐用class创建的有状态组件
* 如果一个组件不需要有自己的私有数据,则推荐使用无状态组件
- 组件中props和state之间的区别
- props中的数据都是外界传递过来的
- state中的数据,都是组件私有的(一般通过ajax获取来的,一般都是私有数据)
- props中的数据是只读的
- state中的数据都是可读可写的
事件绑定:
onClick只能接受一个function
最好写成如下形式
onClick={()=>this.onClickhandler()}
onClickhandler=()=>{
}
state:
注意,React中,如果想为state中的数据重新赋值,不要使用this.state.***=值,应该调用React提供的this.setState({msg:'123'})
setState执行方法是异步的
如果在调用完this.setState之后,又想立即拿到最新的state值,需要使用
this.setState({},callback) 因为react是单向数据绑定,所以需要一个callback回调函数来拿到最新值
当为文本框绑定value值以后,要么同时提供一个readOnly,要么提供一个onChange处理函数
-
如果UI页面上,文本框的内容变化了,想要把最新的值同步回state中去,此时,React没有这种自动同步机制:
- 在react中,需要程序员手动监听文本框的onChange事件;
- 在onChange事件中,拿到最新的文本框的值;
- 程序员调用this.setState({})手动吧最新的值同步到state中
-
在onChange事件中获取文本框的值,有两种方案
- 通过事件参数e来获取 const newVal=e.target.value
this.setState({msg:newVal}) - 利用ref
- 通过事件参数e来获取 const newVal=e.target.value
console.log(this.refs.txt.value)
{
name:'',
age:'',
:'',
name2:'',
name3:'',
}