React之props和state

React 基础之props和state

1. 在class 关键字创建的组件中，如果想使用外界传来的props参数，不许接收，直接通过this.props.***来访问即可
2. 注意无论是class 还是普通的function创建的组件，它们的props都是只读的
3. 另外注意 ：class创建的组件，是有自己的私有属性和生命周期函数，
   而function创建的组件，只有props，没有自己的私有数据和生命周期函数。
4. class组件继承了Component组件后，必须在构造器里调用super(),只有调用了super()后，才能使用this关键字

constructor(){
   super()
   this.state={}
}

* 在class创建的组件中，this.state都是可读可写的
  而props都是只读的，不能被重新赋值
* 如果一个组件需要有自己的私有数据，则推荐用class创建的有状态组件
* 如果一个组件不需要有自己的私有数据，则推荐使用无状态组件

5. 组件中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没有这种自动同步机制：

  1. 在react中，需要程序员手动监听文本框的onChange事件；
  2. 在onChange事件中，拿到最新的文本框的值；
  3. 程序员调用this.setState({})手动吧最新的值同步到state中

• 在onChange事件中获取文本框的值，有两种方案

  1. 通过事件参数e来获取 const newVal=e.target.value
     this.setState({msg:newVal})
  2. 利用ref

console.log(this.refs.txt.value)

{
name:'',
age:'',
:'',
name2:'',
name3:'',
}