redux笔记 进阶

1 拆分UI组件和容器组件

import React from 'react'
const AppUI = (props) =>{
  return (
    <div className="App">
      <label htmlFor="box">
        输入信息
        <input id="box" 
          value = {props.inputValue} 
          onChange = {props.handleInputChange}
        />
        <button onClick={props.submitData}>提交</button>
        </label>
      <ul>
       {
         props.list.map((item,index) => {
            return (
              <li key={index} onClick={props.deleteList.bind(this,index) }>{item}</li>
            )
         })
       }
      </ul>
    </div>
  );
}
export default AppUI;

对应的聪明组件：

render() {
    const {inputValue,list} = this.state
    return (
      <AppUI
      inputValue = {inputValue}
      handleInputChange = {this.handleInputChange}
      submitData = {this.submitData}
      list = {list}
      deleteList = {this.deleteList}
      />
    );
 }