表单提交的简单优化

作者 : 开心源码 本文共1997个字,预计阅读时间需要5分钟 发布时间: 2022-05-12 共209人阅读

今天,分配的任务做完,问我们组长有没有工作需要帮助,她来了句把自己代码优化下,影响性能的地方,以及 不规范的地方 自己优化下,而后给她看… (等着被吊)

image.png

优化前 (好吧的确臃肿)

 handleSubmit = () => {    // const {    //   // navigation: { navigate },    //   ContactStore: { first, second, data },    // } = this.props;    //上传 first, second, data    if (!this.state.FirstSelectName) {      Toast.show('请选择第一联络人关系', {        position: Toast.positions.CENTER,      });      return false;    }    if (!this.state.selectphone) {      Toast.show('请选择第一联络人姓名', {        position: Toast.positions.CENTER,      });      return false;    }    if (!this.state.SecendSelectName) {      Toast.show('请选择第二联络人关系', {        position: Toast.positions.CENTER,      });      return false;    }    if (!this.state.selectphone_) {      Toast.show('请选择第二联络人姓名', {        position: Toast.positions.CENTER,      });      return false;    }    if (this.state.selectphone === this.state.selectphone_) {      Toast.show('请不要重复选择联络人', {        position: Toast.positions.CENTER,      });      return false;    }    //上传通讯录}

优化后 (指导下…)

... static defaultProps = {    errorInfo:{   FirstSelectName:"请选择第一联络人关系",      selectphone:"请选择第一联络人姓名",      SecendSelectName:"请选择第二联络人关系",      selectphone_:"请选择第二联络人姓名",      errorduplicate:"请不要重复选择联络人",    }  };.... handleSubmit = () => {   const {errorInfo,navigation} = this.props;   const formCheckArray = ["FirstSelectName","selectphone","SecendSelectName","selectphone_"];   const result = formCheckArray.find(key=> !this.state[key]);   if(result){    Toast.show(errorInfo[result], {      position: Toast.positions.CENTER,    });     return false;   }    if (this.state.selectphone === this.state.selectphone_) {      Toast.show(errorInfo.errorduplicate, {        position: Toast.positions.CENTER,      });      return false;    }    //上传通讯录}

是不是舒服多了 ,这里有个优化准则 就是把静态内容 统一管理。 还有其余的优化方案,待研究。。。。
这里记录下 es6的 find的用:
语法:arr.find(callback[, thisArg])

形容:find 方法对数组中的每一项元素执行一次 callback 函数,直至有一个 callback 返回 true。当找到了这样一个元素后,该方法会立即返回这个元素的值,否则返回 undefined注意 callback 函数会为数组中的每个索引调使用即从 0 到length - 1,而不仅仅是那些被赋值的索引,这意味着对于稀疏数组来说,该方法的效率要低于那些只遍历有值的索引的方法。callback 函数带有3个参数:当前元素的值、当前元素的索引,以及数组本身。假如提供了 thisArg 参数,那么它将作为每次 callback 函数执行时的上下文对象,否则上下文对象为 undefinedfind 方法不会改变数组。在第一次调使用 callback函数时会确定元素的索引范围,因而在 find 方法开始执行之后增加到数组的新元素将不会被 callback 函数访问到。假如数组中一个尚未被callback函数访问到的元素的值被callback函数所改变,那么当callback函数访问到它时,它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素依旧会被访问到。

返回值: 当某个元素通过 callback 的测试时,返回数组中的一个值,否则返回 undefined。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 表单提交的简单优化

发表回复