无状态组件

Posted 2021-01-22 lianran

// 无状态组件
当组件只有一个render的时候，可以只返回一个函数，不需要再定义class类了，
无状态组件可以提升代码的性能，因为没有生成任何的生命周期函数
import React from ‘react‘
import { Input, Button,List } from ‘antd‘;

无状态组件直接接受props参数，调用的时候：props.inputValue

而容器组件通过constructor(props)函数，调用的时候：this.props.inputValue

class Header extends Component{
// constructor(props){
// super(props);
// this.state={
// focused:false
// };
// this.handleInputFocus=this.handleInputFocus.bind(this);
// this.handleInputBlur=this.handleInputBlur.bind(this);
// }
render(){
let {focused,handleInputFocus,handleInputBlur}=this.props;
}

　　

 

const TodoList2UI=(props)=>{
return (
    <div style={{marginTop: ‘10px‘, marginLeft: ‘10px‘}}>
        <Input value={props.inputValue}
               placeholder="Basic usage"
               onChange={props.handleInputChange}
               style={{width: ‘300px‘, marginRight: ‘10px‘}}/>
        <Button type="primary"
                onClick={props.handleBtnClick}>Primary</Button>
        <List
            style={{marginTop: ‘10px‘, width: ‘300px‘}}
            size="small"
            bordered
            dataSource={props.list}
            renderItem={(item,index) =>(
                    <List.Item onClick={(event)=>{
                        // console.log("event:",event.target);
                        props.handleDelItem(index)}
                    }>{item}</List.Item>)
            }/>
    </div>
)
}
    export default TodoList2UI

　　

---------------------
作者：pansuyong
来源：CSDN
原文：https://blog.csdn.net/pansuyong/article/details/82927598
版权声明：本文为博主原创文章，转载请附上博文链接！