React編程實(shí)戰(zhàn)-父子組件傳值
本文章知識(shí)點(diǎn)均來(lái)自 jspang.com
本節(jié)介紹React 父子組件如何傳值。
return <XiaojiejieItem
service={item}
deleteService = {this.deleteService}
key={index + item}
/>
service ,deleteService 在XiaojiejieItem.js中 直接通過 this.props.service 拿到對(duì)應(yīng)的值熬甫。其中函數(shù)有必要說一下冒签。
方法是使用箭頭函數(shù)的形式定義的番挺，其實(shí)它幫助我們簡(jiǎn)化了一個(gè)步驟
deleteService = index => {
let newServiceList = this.state.serviceList;
newServiceList.splice(index, 1);
this.setState({
serviceList: newServiceList
})
}
//相當(dāng)于代碼中
class Foo {
constructor(){
this.a = ()=>{}
}
}
所以不需要bind的形式僧家，顯示的綁定this拌倍。
return <XiaojiejieItem
service={item}
deleteService = {this.deleteService.bind(this,index)}
key={index + item}
/>
前后兩者的效果一樣箱季，通過百度可知涯穷，兩者的this的作用域不同。
就著bind 與箭頭函數(shù)的問題藏雏，引發(fā)了一個(gè)react性能的問題拷况。目前是初步學(xué)習(xí)react，后面再去了解渲染性能的問題掘殴。
