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
最大的有点。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P23:优化-React-redux程序优化
码云笔记 » P23:优化-React-redux程序优化