react项目实战开发2-组件拆分

 

1.组件的传值

父组件传值给子组件 属性的形式

🌰：

<div>

　　<TodoItem content="1234" />

</div>

子组件引用{this.props.content}

子组件传父组件

 

2.总结组件的通信

子组件传递数据到父组件

第一步：子组件添加事件属性 

第二步: 子组件调用调用传古来的父组件方法

🌰例子

　<TodoItem content="1234"  delete={this.deleteItem.bind(this)}/>

　　组件方法:

　　handleClick(){

　　this.props.delete(this.prop.idx)

}

 

3.TodoList代码优化

1.const {inputValue}=this.state; 代码解构清晰

2.this.deleteListItem=this.deleteListItem.bind(this)->优化性能

3.setState({name:'fadf'})改为 setState(()=>{

　　return {name:'fasdf'}

})

4.标签属性换行

5. html内容有过多逻辑代码,转化为方法