15. react UI组件和容器组件的拆分 及 无状态组件

Posted 2020-11-24 zonehoo

1.组件的拆分

　　组件拆分的前提

　　　　当所有的逻辑都出现在一个组件内时

　　　　组件会变得非常复杂 不便与代码的维护

　　　　所以对组件进行拆分

　　　　IU组件 　 进行页面渲染

　　　　容器组件  进行逻辑操作

　　UI组件的拆分

　　　　新建一个 TodoListUI.js 将 TodoList 组件的 render 方法进行拆分封装为 UI 组件

　　　　其余的 TodoList 组件为 容器组件

# TodoListUI.js

import  React, { Component } from ‘react‘;

import ‘antd/dist/antd.css‘;

import { Button , Input, List } from ‘antd‘;

 

class TodoListUI extends Component{

    render(){

        return (

        <div style={{paddingTop:‘10px‘, paddingLeft : ‘10px‘}}>

            <div>

              <Input style={{width: ‘300px‘, marginRight: ‘10px‘}} onChange={this.props.getInputValue} placeholder=‘请输入‘/>

              <Button type="primary" onClick={this.props.addItem}>提交</Button>

            </div>

            <div>

            <List

                style={{width: ‘300px‘, marginTop: ‘10px‘}}

                bordered

                dataSource={this.props.list}

                renderItem={(item, key) => <List.Item index={key} onClick={this.props.delItem}>{item}</List.Item>}

              />

            </div>

          </div>

      );

    }

}

 

export default TodoListUI;

 

# TodoList.js

import React , {Component} from ‘react‘;

 

import store from ‘./store‘;

import TodoListUI from ‘./TodoListUI‘;

 

class TodoList extends Component

{

  constructor(props){

    super(props);

    this.state = store.getState();

    this.addItem = this.addItem.bind(this);

    this.delItem = this.delItem.bind(this);

    this.getReduxState = this.getReduxState.bind(this);

    this.getInputValue = this.getInputValue.bind(this);

    store.subscribe(this.getReduxState);

  }

 

  getReduxState(){

    this.setState(store.getState());

  }

 

  getInputValue(e){

    const action = {

      type : ‘input_value_change‘,

      value : e.target.value

    }

    store.dispatch(action);

  }

 

  addItem(){

    const action = {

      type : ‘add_item‘,

      value : this.state.inputValue

    }

    store.dispatch(action);

  }

 

  delItem(e){

    const action = {

      type : ‘del_item‘,

      value : e.target.getAttribute(‘index‘)

    }

    store.dispatch(action);

  }

 

  render(){

    return (

      <TodoListUI 

      getInputValue={this.getInputValue}

      addItem={this.addItem}

      delItem={this.delItem}

      list={this.state.list}

      />

    );

  }

}

 

export default TodoList;

 

2. 无状态组件

　　当一个组件只有一个 render 函数的时候 便可以用一个无状态组件替换普通的组件

　　无状态组件的 性能比较高

　　　　无状态组件就是一个函数

　　　　不需要执行类似于类一样的钩子函数

　　将 TodoListUI.js 写成无状态组件

# TodoList.js

import  React from ‘react‘;

import ‘antd/dist/antd.css‘;

import { Button , Input, List } from ‘antd‘;

 

const TodoListUI  = (props)=>{

    return (

            <div style={{paddingTop:‘10px‘, paddingLeft : ‘10px‘}}>

                <div>

                <Input style={{width: ‘300px‘, marginRight: ‘10px‘}} onChange={props.getInputValue} placeholder=‘请输入‘/>

                <Button type="primary" onClick={props.addItem}>提交</Button>

                </div>

                <div>

                <List

                    style={{width: ‘300px‘, marginTop: ‘10px‘}}

                    bordered

                    dataSource={props.list}

                    renderItem={(item, key) => <List.Item index={key} onClick={props.delItem}>{item}</List.Item>}

                />

                </div>

          </div>

    )

}

 

export default TodoListUI;