React 有状态组件改造为无状态组件

最新推荐文章于 2024-10-02 05:39:15 发布

YoloAva

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量202

点赞数

分类专栏： React 文章标签： javascript react 前端

本文链接：https://blog.csdn.net/weixin_60463255/article/details/121577086

版权

React 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

什么时候使用无状态组件？当我们定一个UI组件的时候，它只负责页面渲染，没有做任何逻辑操作，内部因此只有一个render函数的时候，我们可以通过无状态组件来替换掉有状态组件。

无状态组件的优势——性能高，就是一个函数；而有状态组件是js里面的类，类生成的对象中还有生命周期函数，所以既要执行其余的生命周期函数又要执行render，它执行的东西远比无状态组件执行的多得多。一个有状态组件的性能是赶不上一个无状态组件的。

//父组件的模版部分
class TodoList extends Component {
    render() {
        return (
            <TodoListUI
                inpuValue={this.state.inpuValue}
                handleInputChange={this.handleInputChange}
                handleButtonSubmit={this.handleButtonSubmit}
                list={this.state.list}
                handleItemDelete={this.handleItemDelete} />
        )
    }
}
export default TodoList;

//***TodoListUI.js为有状态组件时

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

export default class TodoListUI extends Component {
  render() {
    return (
      <div style={{ marginTop: "10px", marginLeft: "10px" }}>
        <div>
          <Input
            value={this.props.inputValue}
            placeholder="todo info"
            style={{ width: "300px", marginRight: "10px" }}
            onChange={this.props.handleInputChange}></Input>
          <Button type="primary" onClick={this.props.handleButtonSubmit}>提交</Button>
        </div>
        <List
          style={{ marginTop: "10px", width: "370px" }}
          bordered
          dataSource={this.props.list}
          renderItem={(item, index) =>
            <List.Item
              onClick={() => { this.props.handleItemDelete(index) }}>
              {item}
            </List.Item>
          }
        />
      </div>
      //***如果想调用父组件的方法，也想传index过去，就是以上写法，箭头函数每次执行的好时候都能获取到index的值，onClick的时候index就可以被获取到
    )
  }
}

//***TodoListUI.js为无状态组件时

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

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