react中state和props变化会造成render的重新渲染，有时候我们会在render函数中进行一些稍微复杂的逻辑运算

比如说，像下边这种

在props中将

industries引入，然后对其进行筛选，筛选出符合条件的子项有对其进行遍历制造出Option选项，这样写其实并不优雅，会使render变得很臃肿，现在有一种类似于vue的计算属性，可以将之完全抛离。
我们可以将这几步写到一个函数里进行操作，然后在return想要的结果

 

React中对render进行的小优化的更多相关文章

  1. 使用React.Fragment替代render函数中div的包裹

    1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extend ...

  2. 什么是React中的组件

    组件就是页面上的一部分.如图,左边是一个网页.右边是对应的一个组件图.我们可以把一个大的网页拆分成很多小的部分.比如标题部分,对应一个组件,就是标题组件.搜索部分,对应的组件就是搜索组件.而这个搜索组 ...

  3. React中render Props模式

    React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...

  4. react组件中的constructor和super小知识

    react组件中的constructor和super小知识 1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类 ...

  5. 总结react中遇到的坑和一些小的知识点

    在使用react 中经常会遇到各种个样的问题,如果对react不熟悉则会对遇到的问题感到莫名其妙而束手无策,接下来分析一下react中容易遇到的问题和注意点. 1.setState()是异步的this ...

  6. 实现简易版react中createElement和render方法

    function createElement(type, config, children) { // 1. 创建一个对象 // 2.根据参数config修改这个对象 // 3.把children参数 ...

  7. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  8. 在React中使用Redux

    这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  9. [Web 前端] mobx教程(三)-在React中使用Mobx

    copy from : https://blog.csdn.net/smk108/article/details/85053903 Mobx提供了一个mobx-react包帮助开发者方便地在React ...

随机推荐

  1. NUC972当检测到sd卡时，在sd卡驱动中操作gpio开启sd卡的电源，解决sd卡因低电压有时识别不正常的问题

    1.根据硬件原理图,找到对应控制sd卡电源的gpio引脚,并在sd卡驱动文件中定义操作改该引脚的宏 2.在sd卡检测函数中,使用glib增加开sd卡电源的操作,如此当sd卡每次被检测到时,驱动中就会自 ...

  2. Vue + ElementUI 后台管理模板推荐

    最近学习和项目都用到了Vue和ElementUI,自己不是专业前端,搞这些UI上的东西还是有些难度,这里推荐两个Vue + ElementUI后台管理模板 vue-element-admin vue- ...

  3. sqlilab less23-less27a

    less23 本关过滤掉了注释符号-- 和#,并且变量带入数据库时被单引号包裹.需要将后边的单引号闭合.使用and '1'='1,将其加在注入语句的末尾,使用suffix参数 less-24 以后填坑 ...

  4. 如何使用ABBYY FineReader 用户词典识别专业术语？

    ABBYY FineReader 15可以说是比较新的版本,在这个版本中能运用强大的光学字符识别技术对PDF文档扫描件.图像等文件进行OCR识别.在识别的过程中,会使用其内置的词典检查识别文字,以获得 ...

  5. FL Studio在线面板的作用

    FL Studio的在线面板主要是用来显示其自身与Image-Line公司相关的新闻.我们点击它后会看到一个新闻列表菜单,其中每一个项目都包含日期.标题.简介以及URL.详细的内容我们将在下文介绍,一 ...

  6. 商业智能（BI）可视化大屏的设计及使用原则

    信息时代,数据是一种可贵的资源,我们可能经常听到的一句话就是:用数据说话.但是,在没有进行系统化整理之前,数据不过只是一串串冰冷的数字,我们很难从大量的数据中获取到有价值的信息.只有通过合适的可视化工 ...

  7. Non Super Boring Substring 题解(hash+思维)

    题目链接 题目大意 给你一个长度为d(d<=1e5)的字符串,要你求有多少个子串满足这个子串不包含长度大于等于k的回文子串 题目思路 首先可以hash预处理,然后O(1)用前缀hash值和后缀h ...

  8. 探究 | 如何捕获一个Activity页面上所有的点击行为

    前言 最近逛wanAndroid论坛,发现一个有趣的问题:如何捕获一个Activity页面上所有的点击行为. 一起研究下吧,不想看源码的小伙伴可以直接看文末总结- 准备工作 先得罗列出页面上的一些点击 ...

  9. 【NOIP2017提高A组模拟9.7】JZOJ 计数题

    [NOIP2017提高A组模拟9.7]JZOJ 计数题 题目 Description Input Output Sample Input 5 2 2 3 4 5 Sample Output 8 6 D ...

  10. moviepy音视频剪辑：使用autoTrack、manual_tracking+headblur实现半自动追踪人脸打马赛克

    一.引言 在<moviepy1.03音视频剪辑:使用manual_tracking和headblur实现追踪人脸打马赛克>介绍了使用手动跟踪跟踪人脸移动轨迹和使用headblur对人脸进行 ...