無狀態組件

// 無狀態組件
當組件只有一個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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！