无状态组件

当一个组件只有一个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 (
        

            

                
                
                
                    提交
                
            
              {props.handleItemDelete(index)}}>{item}}
            />
        
    )
}

// class TodoListUI extends Component {
//     render(){
//         return (
//             

//                 

//                     
//                     
//                     
//                         提交
//                     
//                 
//                   {this.props.handleItemDelete(index)}}>{item}}
//                 />
//             
//         )
//     }
// }

export default TodoListUI;

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

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

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

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