P12:Redux进阶-如何将组件UI和业务逻辑进行拆分呢

Redux 的基础知识都学完了，但是你离高手还差一点东西，就是如何拆分 UI 部分和业务逻辑，让项目更容易维护，既然能拆分了，就代表能更多人协作，实现超大型项目的开发和快速上线。那么如何把一个组件的 UI 和业务逻辑拆分出来呢？接下来码云笔记就为你揭晓。

拆分 UI 组件

可以看到TodoList.js组件是 UI 和业务逻辑完全耦合在一起的，这时候在src目录下新建一个文件叫TodoListUI.js,快速生成页面的基本结构.

import React, { Component } from 'react';
class TodoListUi extends Component {

    render() { 
        return ( <div>123</div> );
    }
}

export default TodoListUi;

然后去TodoList.js里把JSX的部分拷贝过来， 现在的代码如下(当然现在是不可以使用的，好多东西我们还没有引入，所以会报错):

import React, { Component } from 'react';
class TodoListUi extends Component {
    render() { 
        return ( 
            <div style={{margin:'10px'}}>
                <div>
                    <Input 
                        placeholder={this.state.inputValue} 
                        style={{ width:'250px', marginRight:'10px'}}
                        onChange={this.changeInputValue}
                        value={this.state.inputValue}
                    />
                    <Button 
                        type="primary"
                        onClick={this.clickBtn}
                    >增加</Button>
                </div>
                <div style={{margin:'10px',width:'300px'}}>
                    <List
                        bordered
                        dataSource={this.state.list}
                        renderItem={(item,index)=>(<List.Item onClick={this.deleteItem.bind(this,index)}>{item}</List.Item>)}
                    />    
                </div>
            </div>
         );
    }
}

export default TodoListUi;

要想可用，第一步是需要引入antd的相关类库，这时候你可以拷贝TodoList.js的相关代码，把antd的 CSS 和用到的组件都拷贝过来，进行引入。

import 'antd/dist/antd.css'
import { Input , Button , List } from 'antd'

但是这并没有TodoListUI.js组件所需要的state(状态信息)，接下来需要改造父组件进行传递值。

TodoList.js文件的修改

TodoList.js里就不需要这么多JSX代码了，只要引入TodoListUI.js。

import TodoListUI from './TodoListUI'

引入之后 render 函数就可以写成下面这个样子。

render() { 
    return ( 
        <TodoListUI />
    );
}

这样就算做完 UI 和业务分离的第一步了，剩下的就是改变TodoListUI.js里边的属性了，也就是两个组件的整合。

UI 组件和业务逻辑组件的整合

其实整合就是通过属性传值的形式，把需要的值传递给子组件，子组件接收这些值，进行相应的绑定就可以了。这个步骤比较多，还是看视频学习吧。

TodoList.js 的 render 部分

render() { 
    return ( 
        <TodoListUI 
            inputValue={this.state.inputValue}
            list={this.state.list}
            changeInputValue={this.changeInputValue}
            clickBtn={this.clickBtn}
            deleteItem={this.deleteItem}
        />
    );
}

你还需要在constructor(构造函数里)对deleteItem方法进行重新绑定this，代码如下。

this.deleteItem = this.deleteItem.bind(this)

修改完TodoList.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'}}>
                <div>
                    <Input  
                        style={{ width:'250px', marginRight:'10px'}}
                        onChange={this.props.changeInputValue}
                        value={this.props.inputValue}
                    />
                    <Button 
                        type="primary"
                        onClick={this.props.clickBtn}
                    >增加</Button>
                </div>
                <div style={{margin:'10px',width:'300px'}}>
                    <List
                        bordered
                        dataSource={this.props.list}
                        renderItem={(item,index)=>(<List.Item onClick={(index)=>{this.props.deleteItem(index)}}>{item}</List.Item>)}
                    />    
                </div>
            </div>
         );
    }
}

export default TodoListUi;

需要注意的是在List组件的删除功能,需要用箭头函数的形式，代替以前方法，并在箭头函数里使用属性的方法，调用出你传过来的方法。

<List
    bordered
    dataSource={this.props.list}
    renderItem={(item,index)=>(<List.Item onClick={()=>{this.props.deleteItem(index)}}>{item}</List.Item>)}
/>

这些都做完了，你就已经把组件进行了拆分，本文学习的目的不是拆分的步骤，而是拆分的思想，你可以反复几次来加深对 UI 和业务逻辑拆分的理解。