render()

当 被调用时,它会检查 和 的变化并返回以下类型之一:

    • React 元素。通常通过 JSX 创建。例如,<div /> 会被 React 渲染为 DOM 节点,<MyComponent /> 会被 React 渲染为自定义组件,无论是 <div /> 还是 <MyComponent /> 均为 React 元素。
    • 数组或 fragments。 使得 render 方法可以返回多个元素。欲了解更多详细信息,请参阅 fragments 文档。
    • Portals。可以渲染子节点到不同的 DOM 子树中。欲了解更多详细信息,请参阅有关 字符串或数值类型。它们在 DOM 中会被渲染为文本节点
  • 布尔类型或null。什么都不渲染。(主要用于支持返回 test && <Child /> 的模式,其中 test 为布尔类型。)

render() 函数应该为纯函数,这意味着在不修改组件 state 的情况下,每次调用时都返回相同的结果,并且它不会直接与浏览器交互。

如需与浏览器进行交互,请在 componentDidMount() 或其他生命周期方法中执行你的操作。保持 render() 为纯函数,可以使组件更容易思考。

https://zh-hans.reactjs.org/docs/react-component.html#render

组件的本质为构建UI单元;

无状态组件可以简化为一个函数;

(){

return< ="">

< />

</>

;

render()--组件--纯函数的更多相关文章

  1. react第八单元(什么是纯函数-组件的性能优化-pureComponent-组件性能优化的原理)

    课程目标 理解纯函数 熟练掌握组件性能优化的几种技巧 pureComponent和Component的区别 #知识点 一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用,我们就把这个函数 ...

  2. js函数式编程(一)-纯函数

    我将写的第一个主题是js的函数式编程,这一系列都是mostly adequate guide这本书的读书总结.原书在gitbook上,有中文版.由于原作者性格活泼,书中夹杂很多俚语,并且行文洒脱.中文 ...

  3. JavaScript使用纯函数避免bug

    纯函数 一.纯函数 定义:纯函数是指不依赖并且不修改其作用域之外的函数.通过以下几个示例来认识纯函数: var a = 10; //纯函数 function foo(num){ return num ...

  4. JAVA+PHP+阿里云组件纯手工实现POP、SMTP、IMAP开发邮件服务器(二)

    java开发邮件服务器的接收模块 用java建立socket服务端,监听端口25,实现SMTP协议.即可完成邮件服务器的接收模块. 这里要注意的是,SMTP协议其实可以分为两种.一种是你用手机.PC等 ...

  5. Function Programming - 纯函数(Pure Function)

    纯函数的定义,非常重要!! Pure function 意指相同的输入,永远会得到相同的输出,而且没有任何显著的副作用. 老样子,我们还是从最简单的栗子开始: var minimum = 21; va ...

  6. C#中的函数式编程:递归与纯函数(二)

    在序言中,我们提到函数式编程的两大特征:无副作用.函数是第一公民.现在,我们先来深入第一个特征:无副作用. 无副作用是通过引用透明(Referential transparency)来定义的.如果一个 ...

  7. [UE4]纯函数的执行时机

    一.纯函数是在需要的时候被调用 二.纯函数内不应当修改任何数据 三.如果同一个函数需要多个得到多个纯函数的返回值,则多个纯函数的调用顺序不是固定的,并且一个纯函数的调用顺序也不应当影响下一个纯函数的返 ...

  8. [UE4]有限状态机、动画状态机、纯函数

    有限状态机 FSM:Finite State Machine,表示有限个状态以及在这些状态之间转移和动作的数学模型 纯函数: 纯函数: 先后调用顺序不重要,没有修改任何数值,只是获取数值或者临时计算一 ...

  9. render组件

    [render组件] Render继承于Component. It contians general functionality for all renderers. A renderer is wh ...

随机推荐

  1. 用ADB 抓取和存储APP日志方法

    前置条件:电脑已经安装好adb (一)  进入adb目录下连接手机,检测出手机 CD 到SDK的platform-tools (二)adb logcat-c  清除日志  (三)adb  logcat ...

  2. [原创]小巧免杀的端口转发工具PortTran(附.net源码)

    0x001 简介 PortTran by k8gege.NET版端口转发工具,支持任意权限下转发 0x002 背景工具在2016年左右写的,当时某个内网不知何原故LCX用不了 由于Win2003才刚停 ...

  3. VisualStudio更改项目文件夹名称

    新建了一个空的解决方案(SolutionTest.sln),在文件夹Api中新建了一个webapi项目,物理位置为解决方案根目录下的叫Api文件夹里, 现在想把文件夹名由Api改为MyApi,需要做以 ...

  4. [转帖]IBM Q3财报:云营收达到50亿美元 上升11%

    IBM Q3财报:云营收达到50亿美元 上升11% http://www.eetop.cn/cpu_soc/6946136.html 2019年Q3 IBM的营收 从千亿到 缩减到了 八百亿刀 卖掉了 ...

  5. [Atcoder ARC103D]Robot Arms

    题目大意:平面上有$n$个点,要求你构造$m$条边(满足$m\leqslant40$),使得可以从原点到达给定的$n$个点(边必须平行于坐标轴).并要求输出每一条边的方向,每条边必须都使用,无解输出$ ...

  6. Linux中的RCU的那点事

      原文:https://zhuanlan.zhihu.com/p/67520807     今天来讲一下这Linux内核中的RCU(Read Copy Update,读复制更新)机制. 我主要参考的 ...

  7. jquery.validate.unobtrusive的使用

    应用 一.引入 <script src="Scripts/jquery-1.7.1.min.js"></script> <script src=&qu ...

  8. Trie树的java实现

    leetcode 地址: https://leetcode.com/problems/implement-trie-prefix-tree/description/ 难度:中等 描述:略 解题思路: ...

  9. 在vue-cli中如何安装scss,并全局引入scss

    在vue-cli脚手架采用scss正确的使用姿势 步骤一: 安装node-sass.sass-loader.style-loader npm install node-sass --save-dev ...

  10. 模块化规范:AMD规范和CommonJs规范

    为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱 ...