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

本文介绍了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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值