无状态组件

当一个组件只有一个render函数的时候，就可以用无状态组件来定义这个组件。无状态组件其实就是一个函数。接收props作为参数，props就是父组件传递过来的数据，要求返回一段jsx。

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

// 这个函数里，直接使用props就可以了，不需要this.props
const TodoListUI = (props) => {
    return (
        <div style={{margin:'10px'}}>
            <div>
                <Input 
                    value={props.inputValue}  
                    placeholder="todo info" 
                    style={{width:'300px',marginRight:'10px'}}
                    onChange={props.handleInputChange}
                >
                </Input>
                <Button 
                    type="primary"
                    onClick={props.handleBtnClick}
                >
                    提交
                </Button>
            </div>
            <List
                style={{marginTop:'10px',width:'300px'}}
                bordered
                dataSource={props.list}
                renderItem={(item,index) => <List.Item onClick={()=> {props.handleItemDelete(index)}}>{item}</List.Item>}
            />
        </div>
    )
}

// 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}
//                     >
//                     </Input>
//                     <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={()=> {this.props.handleItemDelete(index)}}>{item}</List.Item>}
//                 />
//             </div>
//         )
//     }
// }

export default TodoListUI;

无状态组件相对于普通的组件的优势是什么？

• 无状态组件性能比较高，因为无状态组件其实就是一个函数，普通组件是一个JS里的类，这个类生成的对象里，还会有一些生命周期函数，它执行起来，既要执行生命周期函数，又要执行render,它执行的东西，远比函数执行的东西要多的多，所以一个普通组件的性能，肯定是比不上一个无状态组件的。

无状态组件什么时候用呢？

• 当我们定义一个UI组件的时候，因为它只负责页面渲染，不用做任何的逻辑操作，这个时候，我们就可以用无状态组件来定义这个UI组件。（这不是绝对的，UI组件理论上虽然是只负责渲染，但是让他做一些简单的逻辑，也是可以的。并不是定死的。）