React之UI组件、容器组件以及无状态组件

最新推荐文章于 2024-08-08 17:29:53 发布

___Alive___

最新推荐文章于 2024-08-08 17:29:53 发布

阅读量3.1k

点赞数 4

分类专栏： React

本文链接：https://blog.csdn.net/YU_M_K/article/details/80960595

版权

本文介绍了React中的三种组件类型：UI组件专注于页面渲染，容器组件处理业务逻辑和数据，而无状态组件是轻量级的函数式组件，用于简化代码并减少生命周期方法。通过实例演示了如何将普通组件拆分为UI组件和容器组件。

摘要由CSDN通过智能技术生成

一：三种组件的简单理解

1.UI组件：只负责页面的渲染

2.容器组件：只负责业务逻辑和数据的处理

3.无状态组件：把UI组件用函数表示（可以省去生命周期函数，优化代码）

二：具体代码

注意：以上一篇文章举例点击打开链接

1.普通组件TodoList.js（拆分成TodoListUi.js(UI组件)和TodoList.js(容器组件)）

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

import {
  getInputChangeAction,getAddItemActiom,getDeleteItemAction}from './store/actionCreator'; 

class TodoList extends  Component{
    constructor(props){
        super(props);
        this.state=store.getState();
        store.subscribe(this.handleStoreChange)
    }
    render(){
        return(
            <div style={
  {
  margin:'10px',marginLeft:'10px'}}>
                <div>
                    <Input
                        value={
  this.state.inputValue}
                        placehoder="todo list "
                        style