react.js之无状态组件

//当一个组件只有render函数的时候，就可以用无状态组件定义这个组件，其实无状态组件就是一个函数

//无状态组件的性能比较高，就只是一个函数

正常定义

import React from 'react';
import { Input, Button, List } from 'antd';

class ToDoListUI extends Component {
    render() {
        return (
            <div style={
   
   { margin: '10px' }}>
                <Input placeholder="请输入内容"
                    value={this.props.inputValue}
                    style={
   
   { width: '300px', marginRight: '10px' }}
                    onChange={this.props.inputChange}
                ></Input>
                <Button type="primary" onClick={this.props.butClick}>提交</Button>
                <List
                    style={
   
   { width: '300px', marginTop: '10px' }}
                    bordered
                    dataSource={this.props.list}
                    renderItem={(item, index) => (
                        <List.Item onClick={(index) => this.props.deleteItem(index)}>
                            {item}
                        </List.Item>
                    )}
                />
            </div>
        )
    }
}
export default ToDoListUI

无状态组件定义

import React from 'react';
import { Input, Button, List } from 'antd';

const ToDoListUI = (props) => {
    return (
        <div style={
   
   { margin: '10px' }}>
            <Input placeholder="请输入内容"
                value={props.inputValue}
                style={
   
   { width: '300px', marginRight: '10px' }}
                onChange={props.inputChange}
            ></Input>
            <Button type="primary" onClick={props.butClick}>提交</Button>
            <List
                style={
   
   { width: '300px', marginTop: '10px' }}
                bordered
                dataSource={props.list}
                renderItem={(item, index) => (
                    <List.Item onClick={(index) => props.deleteItem(index)}>
                        {item}
                    </List.Item>
                )}
            />
        </div>
    )
}
export default ToDoListUI