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. 信息论-Turbo码学习

    1.Turbo码: 信道编码的初期:分组码实现编码,缺点有二:只有当码字全部接收才可以开始译码,需要精确的帧同步时延大,增益损失多 解决方案:卷积码:充分利用前一时刻和后一时刻的码组,延时小,缺点:计 ...

  2. HTTP 报文格式简介

    HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写,它用于传送 WWW 方式的数据,关于 HTTP 协议的详细内容请参考 RFC2616.HTTP 协议采用了请求/响 ...

  3. Springboot 框架整理，建议做开发的都看看，整理的比较详细！

    什么是 Spring Boot? SpringBoot是Spring项目中的一个子工程,与我们所熟知的Spring-framework 同属于spring的产品,是用来简化 spring 初始搭建和开 ...

  4. 几分钟看懂EasyRecovery数据恢复原理，比我想象的简单易懂得多

    可能很多人知道使用数据恢复软件EasyRecovery可以恢复丢失的数据,但是却不知道它是什么原理.现在我们就以硬盘数据恢复为例,一起来了解下EasyRecovery数据恢复原理. 当硬盘数据丢失后, ...

  5. JAVA 中的Optional （臭名昭著的空指针异常（NullPointerException））

    从 Java 8 引入的一个很有趣的特性是 Optional  类.Optional 类主要解决的问题是臭名昭著的空指针异常(NullPointerException) -- 每个 Java 程序员都 ...

  6. P4771 八百标兵奔北坡

    观察题目中关于北边的定义,发现是以当前点为顶点,向上的倒三角(自己想想为什么). 然后就可以直接 DP 了,令 \(f_{i,j}\) 表示点 \(\left(i,j\right)\) 的答案. \[ ...

  7. C语言编程学习者问答第一期，看看这些问题你出现过吗？

    今天给大家分享我们学习基地的小伙伴遇到的问题,以及正确回答,看看这些问题你遇到过吗~ 1.这张图片文字"第二段"后面的说法是否有问题?   回答: 这是二进制的加法,很多人会误解减 ...

  8. 朴素的模式匹配算法BF

    1 #include <iostream> 2 using namespace std; 3 int BF(char S[], char T[]); 4 int main() 5 { 6 ...

  9. 怎么用Iometer测试存储性能

    1.Disk Targets选项栏中选择要测试的磁盘,1 per target of Outstanding I/Os 保持默认即可. 2.在Access Specifications栏中新建测试条件 ...

  10. 关于 spring security 对用户名和密码的校验过程

    1.执行 AuthenticationManager 认证方法 authenticate(UsernamePasswordAuthenticationToken) 2.ProviderManager ...