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

Posted zonehoo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了15. react UI组件和容器组件的拆分 及 无状态组件相关的知识,希望对你有一定的参考价值。

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;

 

 

以上是关于15. react UI组件和容器组件的拆分 及 无状态组件的主要内容,如果未能解决你的问题,请参考以下文章

react容器组件和UI组件

react的UI组件和容器组件

组件和状态设计能力

React 如何设计一个弹窗组件

React的组件模式

React-Redux 总结