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

冷不防 2022-05-21 13:45 207阅读 0赞

# 一：三种组件的简单理解 #

> 1.UI组件：只负责页面的渲染
> 
> 2.容器组件：只负责业务逻辑和数据的处理
> 
> 3.无状态组件：把UI组件用函数表示（可以省去生命周期函数，优化代码）

**二：具体代码**

##### ** ** **     ****注意：以上一篇文章举例[点击打开链接][Link 1]** #####

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={
       {
       width:'300px'}}
                            onChange={
       this.handleInputChange}
                        />
                        <Button
                            type= "primary"
                            onClick={
       this.handleBtnClick}
                        >提交</Button>
                    </div>
                    <List
                        style={
       {
       marginTop:'10px',width:'300px'}}
                        bordered
                        dataSource={
       this.state.list}
                        renderItem={(item,index) => (<List.Item onClick={
       this.handleItemDelet} >{item}</List.Item>)}//这个这个参考antd官网
                    />
                </div>
            )
        }
        handleInputChange=(e)=>{
       
            const action=getInputChangeAction(e.target.value);
            store.dispatch(action);
        };
    
        handleStoreChange=()=>{
            this.setState(store.getState());   
        };
    
        handleBtnClick=()=>{
            
            const action=getAddItemActiom();
            store.dispatch(action);
        };
    
        
        handleItemDelet=(index)=>{
             
            const action=getDeleteItemAction(index);
            store.dispatch(action);
        }
    }
    
    export default TodoList;

2：普通组件拆分成之一TodoListUi.js（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={
      {
      margin:'10px',marginLeft:'10px'}}>
                    <div>
                        <Input
                            value={
      this.props.inputValue}
                            placehoder="todo list "
                            style={
      {
      width:'300px'}}
                            onChange={
      this.props.handleInputChange}
                        />
                        <Button
                            type= "primary"
                            onClick={
      this.props.handleBtnClick}
                        >提交</Button>
                    </div>
                    <List
                        style={
      {
      marginTop:'10px',width:'300px'}}
                        bordered
                        dataSource={
      this.props.list}
                        renderItem={(item,index) => (<List.Item onClick={(index)=>{
      this.props.handleItemDelet(index)}} >{item}</List.Item>)}
                        //调用父组件带参数的函数用箭头函数
                    />
                </div>
            )
        }
    }
    export default TodoListUi;

3：普通组件拆分成之二TodoList.js（容器组件）

import React ,{
      Component}from 'react';
    
    import store from './store/index';
    
    import {
      getInputChangeAction,getAddItemActiom,getDeleteItemAction}from './store/actionCreator';
    import TodoListUi from './TodoListUi';
    
    
    class TodoList extends Component{
        constructor(props){
            super(props);
            this.state=store.getState();
            store.subscribe(this.handleStoreChange)
        }
        render(){
            return(
                <TodoListUi
                    inputValue={
      this.state.inputValue}
                    list={
      this.state.list}
                    handleInputChange={
      this.handleInputChange}
                    handleBtnClick={
      this.handleBtnClick}
                    handleItemDelet={
      this.handleItemDelet}
                />
            )
        }
        handleInputChange=(e)=>{
            const action=getInputChangeAction(e.target.value);
            store.dispatch(action);
    
        };
    
    
        handleStoreChange=()=>{
            this.setState(store.getState())
        };
    
        handleBtnClick=()=>{
    
            const action=getAddItemActiom();
            store.dispatch(action);
        };
    
    
        handleItemDelet=(index)=>{
    
            const action=getDeleteItemAction(index);
            store.dispatch(action);
        }
    }
    
    export default TodoList;

4：UI组件TodoListUi.js把类换成函数（无状态组件）

import React ,{
      Component}from 'react';
    import 'antd/dist/antd.css'
    import {Input,Button,List} from 'antd'
    const TodoListUi=(props)=>{
        return(
            <div style={
      {
      margin:'10px',marginLeft:'10px'}}>
                <div>
                    <Input
                        value={props.inputValue}
                        placehoder="todo list "
                        style={
      {
      width:'300px'}}
                        onChange={props.handleInputChange}
                    />
                    <Button
                        type= "primary"
                        onClick={props.handleBtnClick}
                    >提交</Button>
                </div>
                <List
                    style={
      {
      marginTop:'10px',width:'300px'}}
                    bordered
                    dataSource={props.list}
                    renderItem={(item,index) => (<List.Item onClick={(index)=>{props.handleItemDelet(index)}} >{item}</List.Item>)}
                    //调用父组件带参数的函数用箭头函数
                />
            </div>
        )
    };
    
    
    export default TodoListUi;

[Link 1]: https://blog.csdn.net/yu_m_k/article/details/80957835