15.UI组件和容器组件19-05-28

将Todolist.js中render的代码进行封装
创建TodoListUI.js将原来Todolist.js中render的UI组件代码进行封装
Todolist中原来的代码如下

render() {
       return (
           <div style={{margin:'10px'}}>
              <div>
                <Input
                  value={this.state.inputValue}
                  placeholder='todo info'
                  style={{width:'300px', marginRight:'10px'}}
                  onChange={this.handleInputChange}
                  />
                <Button type="primary" onClick={this.handleBtnClick}>提交</Button>
              </div>
             <List
               style={{marginTop:'10px',width:'300px'}}
               bordered
               dataSource={this.state.list}
               renderItem={(item, index) => <List.Item onClick={this.bandleItemDelete.bind(this, index)}>{item}</List.Item>}
             />
           </div>
       )
     }

TodoListUI.js

import React, {Component} from "react";
import {Button, Input, List} from "antd";

class TodoListUI extends Component{
  render() {
    return  <div style={{margin: '10px'}}>
      <div>
        <Input
          value={this.props.inputValue}
          placeholder='todo info'
          style={{width: '300px', marginRight: '10px'}}
          onChange={this.props.handleInputChange}
        />
        <Button type="primary" onClick={this.props.handleBtnChange}>提交</Button>
      </div>
      <List
        style={{marginTop: '10px', width: '300px'}}
        bordered
        dataSource={this.props.list}
        renderItem={(item, index) => (<List.Item onClick={(index) => {this.props.bandleItemDelete(index)}}>{item}</List.Item>)}
      />
    </div> }
}
export default TodoListUI;

Todolist.js

render() {
    return (
     <TodoListUI
       inputValue={this.state.inputValue}
       list={this.state.list}
       handleInputChange={this.handleInputChange}
       handleBtnChange={this.handleBtnChange}
       bandleItemDelete={this.bandleItemDelete}
     />
    )
  }

当一个组件只有一个render函数的时候，可以通过一个无状态组件替换掉这个普通的组件，无状态组件相对于普通组件性能比较高。

TodoListUI.js

import React, {Component} from "react";
import {Button, Input, List} from "antd";

const TodoListUI = (props)=> {
  return (
    <div style={{margin: '10px'}}>
      <div>
        <Input
          value={props.inputValue}
          placeholder='todo info'
          style={{width: '300px', marginRight: '10px'}}
          onChange={props.handleInputChange}
        />
        <Button type="primary" onClick={props.handleBtnChange}>提交</Button>
      </div>
      <List
        style={{marginTop: '10px', width: '300px'}}
        bordered
        dataSource={props.list}
        renderItem={(item, index) => (<List.Item onClick={(index) => {
          props.bandleItemDelete(index)
        }}>{item}</List.Item>)}
      />
    </div>
  )
}
export default TodoListUI;