1. constructor()
constructor(props){
super(props)
this.state=({
})
}
一定先写super 可以接收从父组件传来的值
父组件往子组件传值的方法
<ChildComponent nextValue={xxx.xxx} nextValue2={xxx.xxx}/>
直接在组件中写属性名等于属性值就可以,有多少传多少
在子组件 ChildComponent 中获取父组件传来的值只需要用
this.props.nextValue
就可以得到父组件传来的值
由此衍生一个问题,子组件如何给父组件传值
首先,需要在父组件定义一个方法(agechange),然后将方法传给子组件,
class App extends Component {
agechange=(age)=>{
alert(age)
} render() { return (
<div className="App">
<Child agechange={this.agechange}/> //将方法传给子组件
</div>
)
}
}
在子组件中调用这个方法,将需要传给父组件的值,通过这个方法传给父组件,
class Child extends Component {
constructor(props){
super(props)
this.state=({
age:0
})
}
handleChange=()=>{
this.setState({
age:this.state.age+3
})
this.props.agechange(this.state.age) //将子组件的age值传给父组件
}
render(){
return(
<div>
<button onClick={this.handleChange.bind(this)}>点击增加age</button>
</div>
)
}
}
2.componentWillMount
关于componentWillMount方法只想说一点,它的调用在constructor之后,在render之前,在这方法里的代码调用setState方法不会触发重渲染
3.componentDidMount
一般的从后台(服务器)获取的数据,都会与组件上要用的数据加载有关,所以都在componentDidMount方法里面作
4.componentWillReceiveProps
当父组件传给子组件的props发生改变时,子组件可以通过componentWillReceiveProps 方法接收,可以setState 重新渲染组件
当父组件通过ajax异步获取的值需要传给子组件时,子组件可以用到componentWillReceiveProps(nextProps) 关于setState() 它不是同步的,也不能说是异步的,所以不要在setState之后,直接用state中的值,很容易出错。