P23:优化-React-redux程序优化

本文主要内容把现在写的代码优化一下,程序的都应该有一些代码洁癖,就像我们人穿衣服一样,一定要干净得体才能提升气质,同样我们写代码也一样,干净有条理才能写出让人称赞的程序。写完业务逻辑后作代码优化,也是程序员的本质工作之一。

用结构复制精简代码

现在代码中有好几处this.props都是重复的,这时候就可以用javascript的解构赋值方法,来精简代码。修改TodoList.js中的Render函数,把原来带代码修改为下面的代码:

render() {
    let {inputValue ,inputChange,clickButton,deleteItem,list} = this.props; 
    return ( 
        <div>
            <div>
                <input
                    value={inputValue}
                    onChange={inputChange} />
                <button onClick={clickButton}>提交</button>
            </div>
            <ul>
                {
                    list.map((item,index)=>{
                        return (
                            <li
                                key={index}
                                onClick={deleteItem}
                                >{item}</li>
                        )
                    })
                }
            </ul>
        </div>
        );
}

把TodoList改为UI组件-提高性能

可以看到,现在的TodoList组件里没有任何的业务逻辑,只有一个Render方法,这时候就可以把它改为UI组件(无状态组件),UI组件就是一个方法,减少很多冗余操作,从而提高程序运行性能。这时候重新声明一个TodoList的变量,然后把render函数里的东西复制过来,只要稍加修改,就可以得到下面的代码:

const TodoList = (props) => {
    let {inputValue ,inputChange,clickButton,deleteItem,list} = props; 
    return ( 
        <div>
            <div>
                <input
                    value={inputValue}
                    onChange={inputChange} />
                <button onClick={clickButton}>提交</button>
            </div>
            <ul>
                {
                    list.map((item,index)=>{
                        return (
                            <li
                                key={index}
                                onClick={deleteItem}
                                >{item}
                            </li>
                        )
                    })
                }
            </ul>
        </div>
    );
}

代码写完后,我们删除一些不用的引入,然后就可以到浏览器中进行预览了。

import React from 'react';
import {connect} from 'react-redux'

为了更好的学习,我在这里给出目前TodoList.js的所有代码。

import React from 'react';
import {connect} from 'react-redux'

const TodoList = (props) => {
    let {inputValue ,inputChange,clickButton,deleteItem,list} = props; 
    return ( 
        <div>
            <div>
                <input
                    value={inputValue}
                    onChange={inputChange} />
                <button onClick={clickButton}>提交</button>
            </div>
            <ul>
                {
                    list.map((item,index)=>{
                        return (
                            <li
                                key={index}
                                onClick={deleteItem}
                                >{item}
                            </li>
                        )
                    })
                }
            </ul>
        </div>
    );
}

const stateToProps = (state) => {
    return {
        inputValue: state.inputValue,
        list: state.list
    }
}

const dispatchToProps = (dispatch) => {
    return {
        inputChange(e){
            let action = {
                type: 'change_input',
                value: e.target.value
            }
            dispatch(action)
        },
        clickButton(){
            let action = {
                type: 'add_item'
            }
            dispatch(action)
        },
        deleteItem(index){
            let action = {
                type: 'delete_item',
                index
            }
            dispatch(action)
        }
    }
}
 
export default connect(stateToProps,dispatchToProps)(TodoList);

那我们反过来,再来理解一下最后一句话代码的意思。

export default connect(stateToProps,dispatchToProps)(TodoList);

connect的作用是把UI组件(无状态组件)和业务逻辑代码的分开,然后通过connect再链接到一起,让代码更加清晰和易于维护。这也是React-Redux最大的有点。

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

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发