事件绑定
<button onClick={this.handClick}>click</button>
直接这么写的话，this指向事件响应时的上下文（window），并不是当前组件实例
可用的方法
bind方法
- 每次重新渲染时，都会生成一个新的函数实例保存在listenerBank中
- 数量多时极其浪费内存。
- 如果是子组件的props，则会导致子组件重新渲染。
- 用默认参数event来解决，如【箭头函数-函数上】，它们会在有event参数的情况下绑定到同一个函数上
<button onClick={this.handleEdit.bind(this, param)}>编辑</button>
箭头函数上调用
- 实际效果同bind方法，同样会造成重新绑定问题
- 可以带参数，但是需要把参数写两次，不划算
<button onClick={(param) => this.handleEdit(param)}>编辑</button>
构造器内部声明
- 官方推荐，虽然代码量多
- 事件只会生成一个
constructor(props){
super(props);
this.handleEdit = this.handleEdit.bind(this);
}
箭头函数声明
- 写法简单
- 只会生成一个
- 不能带参数，带参数就要写成bind方式
const handleEdit = (e) => {
console.log(e)
}
双冒号语法
- ::的意思是，绑定左值和右值
- 相当于.bind(this)，但是不能带参数，不推荐
<button onClick={::this.click}></button
当组件的事件数量极多时，用【构造器内部声明】方法，否则就牺牲性能来换取便捷，有参数就用【bind方法】，没有就用【箭头函数声明】。这是又一个性能与业务平衡的例子。
一个注意点
<button type="button" onClick={this.handClick}>click</button>
若写为onClick={this.handClick()}，则在该页面加载时，该事件会自动执行。 需去掉最后的()方可正常在点击时触发函数执行。
父子组件通讯
父组件向子组件
// 父组件
<Sub title = "今年过节不收礼" />
// 子组件
const Sub = (props) => {
return(
<h1>
{ props.title }
</h1>
)
}
子组件向父组件
// 子组件
const cb = (msg) => {
return () => {
props.callback(msg)
}
}
return(
<button onClick = { cb("我们通信把") }>点击我</button>
)
// 父组件
callback(msg){
console.log(msg);
}
render(){
return(
<Sub callback = { this.callback.bind(this) } />
)
}
父组件变化时同步更新子组件
方法一：巧用key
<Children key={this.state.key} a={this.state.a} /> //父组件调用子组件
这种方法是通过key变化子组件会重新实例化 （react的key变化会销毁组件在重新实例化组件）
方法二：利用ref父组件调用子组件函数（不符合react设计规范，不推荐）
方法三：父级给子级传数据，子级只负责渲染（最符合react设计观念，推荐)
// 子组件
componentWillReceiveProps(nextProps) {
const { data } = this.state
const newdata = nextProps.data.toString()
if (data.toString() !== newdata) {
this.setState({
data: nextProps.data,
})
}
}
注：react的componentWillReceiveProps周期是用改变的props来判断更新自身state
生命周期
