state
理解:state是组件对象最重要的属性,值是对象(可以包含多个key—value组合)
state中的值可以修改,修改的唯一方法是调用this.setState,每次修改以后,自动调用 this.render 方法,再次渲染组件。(也就是说直接this.state.num=2这样直接修改值是无效的)
state在组件的构造函数中赋值
class View extends Component{ constructor(){ super(); this.state={ num:10 } } //state={num:10} 直接做为实例属性也可以 }
setState有两种格式
传一个对象
直接修改state的值
因为 this.props 和 this.state 可能会异步更新,所以不能依赖他们的值来更新下一个状态。解决办法让 setState() 接收一个函数
this.setState({})
传一个函数
接收两个参数preState,props
更新前的state,更新后的props
修改state自身的值(例:state.num+4)
// 传函数的两种写法 // 普通函数 this.setState(function(state,props){ return {num:state.num--} }) // 箭头函数 this.setState((state,props)=>({num:state.num}))
遍历state的值,循环渲染页面
list(){ return this.state.lists.map((v,i)=>(<li key={i}>{v}</li>)) } //直接在dom中渲染即可(因为render会执行两次,所以要进行简单的处理) <ul>{this.state.lists.length!==0:this.list():'';}</ul>