自定义的组件都必须要用大写字母开头,普通的 HTML 标签都用小写字母开头。
组件 : <Header / >
方法会自动传如一个event对象
func(e) {
console.log(e.target.innerHTML)
}
方法拿到this函数必须要绑定才可以。
<button onClick = this.func.bind(this)>按钮<button/>
组件初始化时候的state
constructor () {
super()
this.state = { msg: "Hello"}
}
组件修改state值
func (){
console.log(this.state.)
this.setState({
msg: this.msg+ "world";
})
console.log(this.state.)
}
两次的打印的值是相同的。不能直接处理this.state里面的参数,异步更新。
setState可以接受对象和函数、setState不会立即修改参数。传参函数可以解决这个问题,
func (){
this.setState((state)=>{
return {
num : state.num + 1
}
})
this.setState((state)=>{
return {
num : state.num + 2
}
}
}
Props 和 State
state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化,可以被组件自身修改,而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState 方法进行更新,setState 会导致组件的重新渲染。
props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数,组件内部无法控制也无法修改。除非外部组件主动传入新的 props,否则组件的 props 永远保持不变。
没有 state 的组件叫无状态组件(stateless component),设置了 state 的叫做有状态组件(stateful component)。因为状态会带来管理的复杂性,我们尽量多地写无状态组件,尽量少地写有状态的组件。
多写props,少写state