React之無狀態組件

React之無狀態組件可以TodoListUI組件對比

無狀態組件的優點：性能更高，因為他就是一個函數，TodoLIstUI組件是一個類，還需要執行其中的生命周期函數

import React, { Component } from 'react'
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd'

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

// class TodoLisetUI extends Component {
//   render () {
//     return (
//       <div style={{marginTop: '10px', marginLeft: '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.handleBtnClick}>提交</Button>
//         </div>
//         <List
//           style={{marginTop: '10px', width: '300px'}}
//           bordered
//           dataSource={this.props.list}
//           renderItem={(item, index) => (<List.Item onClick={(index) => {this.props.handleItemDelete(index)}} >{item}</List.Item>)}
//         />
//       </div>
//     )
//   }
// }

export default TodoListUI