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. JavaScript高级程序设计（第四版） -- 随笔 -- 数组（未完）

    数组方法 .every() 与 .some() 传给两个个方法的函数都接收3个参数:数组元素.元素索引和数组本身. .every() -- 对于每一项都需要返回true,它才会返回true 若中途有一 ...

  2. linux centos 6.x 装机后基本优化

    1.关闭SELinux /etc/selinux/config配置文件内替换 se -i 's/SELINUX=enforcing/SELINUX=disabled/g'需要重启grep SELINU ...

  3. tp5配置引入使用redis

    1.首先你的php得是已经安装了redis扩展的 2.在tp里找到config.php配置文件,找到cache,改成下面的样子 'cache' => [ // 选择模式 'type' => ...

  4. Spring Cloud实战 | 第九篇：Spring Cloud整合Spring Security OAuth2认证服务器统一认证自定义异常处理

    本文完整代码下载点击 一. 前言 相信了解过我或者看过我之前的系列文章应该多少知道点我写这些文章包括创建 有来商城youlai-mall 这个项目的目的,想给那些真的想提升自己或者迷茫的人(包括自己- ...

  5. httpservlet类中两个service方法

    在浏览器访问html页面时,当数据提交给servlet时发生了什么,这是我们需要了解的. 1.我们需要了解一下servlet的继承体系. servlet接口 ------->GenericSer ...

  6. 2019年第十届蓝桥杯【C++省赛B组】D、E、G、H、I题解

    这场有几道题目思路,在之前比赛中遇到过 D. 数的分解 #枚举 题意 将\(2019\)分解成\(3\)个各不相同的正整数之和,并且每个正整数都不包含数字\(2\)和\(4\),一共有多少种分解方法? ...

  7. Docker基础知识及入门

    什么是Docker? Docker是由dotcloud公司使用golang语言进行开发的,基于Linux内核的 cgroup,namespace,以及OverlayFS类的Union FS等技术,对进 ...

  8. 企业安全06-Fastjson-CNVD-2017-02833

    Fastjson-CNVD-2017-02833 一.漏洞概述 fastjson在解析json的过程中,支持使用@type字段来指定反序列化的类型,并调用该类的set/get方法来访问属性,当组件开启 ...

  9. [教程] Android Native内存泄漏检测方法

    转载请注明出处:https://www.cnblogs.com/zzcperf/p/9563389.html Android 检测 C/C++内存泄漏的方法越来越简便了,下面列举一下不同场景下检测C/ ...

  10. jvm参数与生产配置

    堆内存分配:JVM初始分配的内存由-Xms指定,默认是物理内存的1/64JVM最大分配的内存由-Xmx指定,默认是物理内存的1/4默认空余堆内存小于40%时,JVM就会增大堆直到-Xmx的最大限制:空 ...