P22:优化-React-redux程序优化
Posted wgchen~
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了P22:优化-React-redux程序优化相关的知识,希望对你有一定的参考价值。
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最大的有点。
以上是关于P22:优化-React-redux程序优化的主要内容,如果未能解决你的问题,请参考以下文章
Android 逆向整体加固脱壳 ( DEX 优化流程分析 | dvmDexFileOpenPartial | dexFileParse | 脱壳点 | 获取 dex 文件在内存中的首地址 )(代码片
博客首页全新改版;博客代码片支持折叠;原创博文新增打赏功能……2022.1.17