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. MySQL 的常用引擎

    1. InnoDB InnoDB 的存储文件有两个,后缀名分别是 .frm 和 .idb,其中 .frm 是表的定义文件,而 idb 是数据文件. InnoDB 中存在表锁和行锁,不过行锁是在命中索引 ...

  2. 面试阿里，腾讯，字节跳动90%都会被问到的Spring中的循环依赖

    前言 Spring中的循环依赖一直是Spring中一个很重要的话题,一方面是因为源码中为了解决循环依赖做了很多处理,另外一方面是因为面试的时候,如果问到Spring中比较高阶的问题,那么循环依赖必定逃 ...

  3. mock模拟接口返回数据

    mock,是python中模拟接口返回数据 1.安装 pip install mock import unittest from mock import Mock def add(a,b): pass ...

  4. python办公入门3：xlrd操作工作表

    工作表 1 import xlrd 2 3 #接受工作表 4 data=xlrd.open_workbook("data.xlsx") 5 #查询第一个工作表的打开状态 6 pri ...

  5. Git基本操作（一）

    Git 使用(一) - git init 初始化仓库 - git status 仓库状态 - git add filename 单个文件加入暂存 - git add. 全部加入暂存 - git com ...

  6. 区块链V1版本实现之一

    1. 程序地址:https://gitee.com/Jame_sz/beijing_go_term2.git 2. 程序编写流程: //1. 定义结构(区块头的字段比正常的少) //>1. 前区 ...

  7. Java数据结构（十二）—— 霍夫曼树及霍夫曼编码

    霍夫曼树 基本介绍和创建 基本介绍 又称哈夫曼树,赫夫曼树 给定n个权值作为n个叶子节点,构造一棵二叉树,若该树的带权路径长度(wpl)达到最小,称为最优二叉树 霍夫曼树是带权路径长度最短的树,权值较 ...

  8. GoLang 自学系列（二）—— defer

    defer 关键字 首先来看官网的定义: A "defer" statement invokes a function whose execution is deferred to ...

  9. mySQL初学者一定要掌握的数据操纵

    本文献给与作者一样不断地在追求梦想的小伙伴! 文章目录 1.INSERT 语句为表中所有字段添加数据 (1)可以指定所有字段名添加数据 (2)可以不指定字段名添加数据 (3)可以指定部分字段添加数据 ...

  10. VS Code 调试树莓派上的python程序

    安装pip install ptvsd 在py文件前面加代码 import ptvsd ptvsd.enable_attach() ptvsd.wait_for_attach() ptvsd.brea ...