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. Python_爬虫_基础

    1.urllib 和  Xpath的区别与联系 from urllib import request from lxml import etree from bs4 import BeautifulS ...

  2. 有关String的那点事

    (1)String str1 = "abc"; System.out.println(str1 == "abc"); 步骤: 1) 栈中开辟一块空间存放引用st ...

  3. 微信支付回调 敏感信息解密 v3 php

    今天博主用了一波微信的v3版本的支付,支付成功后发现回调跟v2的完全不一样,于是去看了了一波v3的文档,发现信息是经过加密的,需要解密才能获取的到 但是最悲催的是文档上没写怎么解密的,经过了一下午的百 ...

  4. NLP之统计句法分析（PCFG+CYK算法）

    一.认识句法分析 首先,了解一下句法分析到底是什么意思?是做什么事情呢?顾名思义,感觉是学习英语时候讲的各种句法语法.没错!这里就是把句法分析过程交给计算机处理,让它分析一个句子的句法组成,然后更好理 ...

  5. POJ1390 Blocks (区间DP)

    题目链接:POJ 1390.Blocks 题意: 有n个方块排成一列,每个方块有颜色即1到n的一个值,每次操作可以把一段相同颜色的方块拿走,长度为k,则获得的分数为 \(k\times k\),求可获 ...

  6. Vue Springboot （包括后端解决跨域）实现登录验证码功能详细完整版

    利用Hutool 基于Vue.ElementUI.Springboot (跨域)实现登录验证码功能 前言 一.Hutool是什么? 二.下面开始步入正题:使用步骤 1.先引入Hutool依赖 2.控制 ...

  7. Meetings S 题解

    题目描述 题目链接 有两个牛棚位于一维数轴上的点 \(0\) 和 \(L\) 处.同时有 \(N\) 头奶牛位于数轴上不同的位置(将牛棚和奶牛看作点).每头奶牛 \(i\) 初始时位于某个位置 \(x ...

  8. C语言讲义——库函数排序qsort

    qsort函数在在stdlib.h中. 函数原型 void qsort(void *base, size_t nitems, size_t size, int (*compar)(const void ...

  9. C++基础入门知识：C++命名空间（名字空间）详解

    一个中大型软件往往由多名程序员共同开发,会使用大量的变量和函数,不可避免地会出现变量或函数的命名冲突.当所有人的代码都测试通过,没有问题时,将它们结合到一起就有可能会出现命名冲突. 例如小李和小韩都参 ...

  10. PHP AES加密封装类

    简介 PHP AES 加密解密常用封装类 使用方式 $key = 123; $aes = new Aes($key); $data = ['a' => 1]; $aes->decrypt( ...