React编程实战-父子组件传值

本文章知识点均来自 jspang.com

本节介绍React 父子组件如何传值。

 return <XiaojiejieItem
            service={item}

            deleteService = {this.deleteService}
            key={index + item}
         />

service ,deleteService 在XiaojiejieItem.js中 直接通过 this.props.service 拿到对应的值。其中函数有必要说一下。

方法是使用箭头函数的形式定义的，其实它帮助我们简化了一个步骤

 deleteService = index => {
     let newServiceList = this.state.serviceList;
     newServiceList.splice(index, 1);
     this.setState({
         serviceList: newServiceList
     })
 }
 
 //相当于代码中
 class Foo {
  constructor(){
    this.a = ()=>{}
  }
}

所以不需要bind的形式，显示的绑定this。

 return <XiaojiejieItem
            service={item}
            deleteService = {this.deleteService.bind(this,index)}
            key={index + item}
         />

前后两者的效果一样，通过百度可知，两者的this的作用域不同。

就着bind 与箭头函数的问题，引发了一个react性能的问题。目前是初步学习react，后面再去了解渲染性能的问题。