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

红太狼 2023-10-06 20:58 2阅读 0赞

#### React-redux ####

*  阐述
 *  用结构复制精简代码
 *  把TodoList改为UI组件-提高性能

## 阐述 ##

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

写完业务逻辑后作代码优化，也是程序员的本质工作之一。

## 用结构复制精简代码 ##

现在代码中有好几处 `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最大的有点。