无状态组件

前面我们写了UI组件 和 容器组件。

还有一种组件：无状态组件。

无状态组件其实就是一个函数。普通的组件，是js 中的类，这个类还有一些生命周期函数。所以无状态组件的性能比普通组件要好。

当一个组件，只有一个render 函数的时候，就可以被修改成无状态组件。

一般，在做UI组件的时候，它没有逻辑操作，只是渲染的话。我们可以使用无状态组件定义它。

这是之前的UI组件，代码。

import React, {Component} from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';


class TodoListUI extends Component {
  render() {
    return (
      <div style={{marginTop: '10px',marginLeft: '10px'}}>
        <Input
          value={this.props.inputValue}
          placeholder="todo info"
          style={{width: 300, marginRight: '10px'}}
          onChange={this.props.handleInputChange}
        />
        <Button
          type="primary"
          onClick={this.props.handleBtnClick}
        >提交</Button>
        <List
          style={{marginTop: '10px', width: '300px'}}
          bordered
          dataSource={this.props.list}
          renderItem={(item, index) => (<List.Item onClick={() => {this.props.handleItemClick(index)}}>{item}</List.Item>)}
        />
      </div>
    )
  }
}

export default TodoListUI;

下面是将它改成无状态组件的代码。（容器组件那边，代码完全不用改）

import React, {Component} from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';

const TodoListUI = (props) => {
  return (
    <div style={{marginTop: '10px',marginLeft: '10px'}}>
      <Input
        value={props.inputValue}
        placeholder="todo info"
        style={{width: 300, marginRight: '10px'}}
        onChange={props.handleInputChange}
      />
      <Button
        type="primary"
        onClick={props.handleBtnClick}
      >提交</Button>
      <List
        style={{marginTop: '10px', width: '300px'}}
        bordered
        dataSource={props.list}
        renderItem={(item, index) => (<List.Item onClick={() => {props.handleItemClick(index)}}>{item}</List.Item>)}
      />
    </div>
  )
}


export default TodoListUI;