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和业务逻辑拆分的理解。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P12:Redux进阶-如何将组件UI和业务逻辑进行拆分呢

发表评论

提供最优质的资源集合

立即查看 了解详情