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 _PyQt5对话框

    Python 调用PyQt5 制作对话框,退出时候有二次确认(注:默认是直接退出) 1 # -*- ytf-8 -*- 2 """ 3 用PyQt建一个对话框,退出时提示 ...

  2. Elasticsearch 国内镜像下载站

    镜像地址:https://thans.cn/mirror/elasticsearch.html 支持 5.0.0~7.3.1 各个平台的各个版本. 本文章转载他人.

  3. win10，ubuntu时间不对问题

    sudo apt-get install ntpdate sudo ntpdate time.windows.com   # ntp2.aliyun.com      然后将时间更新到硬件上: sud ...

  4. Metasploit 脚本Web传递（Web Delivery）

    Metasploit 脚本Web传递(Web Delivery)

  5. Pinpoint 更改agentid 和 agent name 长度限制(Pinpoint系列二)

    本文基于 Pinpoint 2.1.0 版本 本文的内容为了更改 ID 和 Name 长度限制,因为有使用容器或者是服务名称确实比较长,所以根据业务场景,我们需要更改源码来实现这个. 具体更改,参考 ...

  6. Python：安装Bio库不成功，出现ModuleNotFoundError: No module named 'Bio'

    Bio库的安装并不是pip install bio,而是biopython. ./anaconda3/bin/pip3 install biopython -i https://pypi.douban ...

  7. configure.ac和Makefile.am的格式解析概述

    1. configure.ac和Makefile.am的格式解析概述 1.1. Autotools相关工具链 1.1.1. Autotools 1.1.2. 其他相关工具 1.2. 工具链的流程 1. ...

  8. mybatis中的一些标签使用

    主要有两个配置文件,一个是主配置文件SqlConfig.xml, 还有一个是dao接口实现类相对应的mapper的配置文件 .比如userDao的userDao.xml配置文件. 1.resultTy ...

  9. Linux高可用之Keepalived

    1: 安装keepalived yum install -y keepalived ipvsadm 安装keepalived和LVS管理软件ipvsadm 主机与备机都需要安装 ######修改配置文 ...

  10. 电脑adb命令给智能电视安装APK

    配置环境 1.电脑需要配置好adb系统环境 具体操作较复杂,请自行百度. 2.电视打开adb命令 在电视的关于界面通过遥控器「上上下下左右左右」进入工厂模式,在「高级设置」-「其他」中的「adb开关」 ...