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. Linux下如何创建loop device

    在Linux中,有一种特殊的块设备叫loop device,这种loop device设备是通过映射操作系统上的正常的文件而形成的虚拟块设备 因为这种设备的存在,就为我们提供了一种创建一个存在于其他文 ...

  2. spring cloud 入门系列

    springcloud入门总结转发自:https://www.cnblogs.com/sam-uncle/p/9340390.html 最近看到微服务很火,也是未来的趋势, 所以就去学习下,在dubb ...

  3. PEP8编程规范

    1.PEP8编程规范 [少加空格多写注释,严格对齐] 1.缩进 缩进table = 4个空格:设置好后使用编辑器的自然table 2.if条件书写规范 if的条件多的时候用左边括号对齐:if条件完毕后 ...

  4. Docker学习第三天(Docker数据卷管理)

    1.Docker数据卷管理 在Docker中,要想实现数据的持久化(所谓Docker的数据持久化即数据不随着Container的结束而结束),需要将数据从宿主机挂载到容器中.目前Docker提供了三种 ...

  5. 实验吧[WEB]——程序逻辑问题

    拿到题 通过查看网页源代码发现index.txt 通过index.txt我们获得了后端的源代码 我们可以通过我画出来的这两个重要的信息得知 第一个sql查询语句没有任何过滤说明存在SQL注入漏洞. 第 ...

  6. MathType中如何编辑求和公式

    在学习过程中,尤其是在写需要用到数学公式的论文的时,需要输入数学公式并进行格式编辑等,那么对于简单的公式可以使用Office自带的公式编辑器,对于复杂的公式建议使用专业的公式编辑器MathType,该 ...

  7. guitar pro系列教程（二十一）：Guitar Pro在乐谱上的工作【一】

    当我们使用Guitar Pro写好一首乐谱之后,通常在乐谱上还会有哪些操作呢?对于刚接触{cms_selflink page='index' text='Guitar Pro'}的朋友们肯定还是不熟悉 ...

  8. python3基础3

    # 匿名函数: bbb = lambda a, b: a + b print(bbb(1,1)) # 函数 def add(a=None, b=None): """ 接收 ...

  9. NOIP2020 游记

    为了防止被禁赛三年,这里说明一下,本篇游记是提前开坑的. 10.9 上午模拟赛,下午初赛改成了全天初赛. 但还是想了会儿题,写了两道水题找找信心吧,毕竟前几天挂分挺严重的. 机房还是挺乱的,甚至连自己 ...

  10. C语言讲义——函数

    为实现特定目的而编写的一段可被调用的代码 简单地讲:函数就是一组语句,取了个名字 别名:子例程(routine)/方法(Method,一般面向对象的语言使用这个叫法) 函数的组成部分 以主函数为例: ...