// 无状态组件
当组件只有一个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
版权声明:本文为博主原创文章,转载请附上博文链接!