react无状态组件

 

 

 

一个普通组件只有render函数的时候，我们完全可以通过一个无状态组件来替换掉这个普通组件。

无状态组件相对于这个普通函数的优势如下：

无状态组件的性能比较高。

因为无状态组件就是一个函数。而普通组件是js里面的一个类，而这个类生成的对象里还有生命周期函数，他执行起来既要执行生命周期函数，还要执行render，性能是一定比不上无状态组件的。

 

 

 

普通组件如下：

//这是UI组件，只负责渲染页面，不负责逻辑处理
import React, { Component } from 'react';
import "antd/dist/antd.css";
import { Input, Button, List, Typography, Tag } from "antd";

//这是无状态组件：（无状态组件就是一个函数）
class ToDoListUI extends Component {
    render() {
        return (
          <div style={{ marginTop: "10px" }}>
            <Input
              value={this.props.inputValue}
              placeholder="请输入电影名字"
              style={{ width: "300px" }}
              onChange={this.props.handleInputChange}
            />
            <Button onClick={this.props.handleButtonClick} type="primary">
              提交
            </Button>
            <br />
            <Tag color="lime">想看的电影愿望清单:</Tag>
            <List
              style={{ marginTop: "10px", width: "300px" }}
              bordered
              dataSource={this.props.list}
              renderItem={(item, index) => (
                <List.Item
                  onClick={(index) => {this.props.handleItemDelete(index)}}
                >
                  {item}
                </List.Item>
              )}
            />
          </div>
        );
    }
}

export default ToDoListUI;

 

无状态组件：

//这是UI组件，只负责渲染页面，不负责逻辑处理
import React, { Component } from 'react';
import "antd/dist/antd.css";
import { Input, Button, List, Typography, Tag } from "antd";


const ToDoListUI = (props) => {
  return (
    <div style={{ marginTop: "10px" }}>
      <Input
        value={props.inputValue}
        placeholder="请输入电影名字"
        style={{ width: "300px" }}
        onChange={props.handleInputChange}
      />
      <Button onClick={props.handleButtonClick} type="primary">
        提交
      </Button>
      <br />
      <Tag color="lime">想看的电影愿望清单:</Tag>
      <List
        style={{ marginTop: "10px", width: "300px" }}
        bordered
        dataSource={props.list}
        renderItem={(item, index) => (
          <List.Item
            onClick={index => {
              props.handleItemDelete(index);
            }}
          >
            {item}
          </List.Item>
        )}
      />
    </div>
  );
}

export default ToDoListUI;