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. angualr post 数据请求

    数据请求 post 新建一个服务 1. ng g service services /+服务名  eg:ng g service services/player 在此服务中进行设置 引入自带组件以及注 ...

  2. 【源码阅读】SpringBoot-v2.2.0启动过程以及细节

    启动流程 图如下: 以上流程图源文件(可导入https://www.processon.com):https://github.com/Mysakura/DataFiles 相关Event(org.s ...

  3. C++动态规划实现查找最长公共子序列

    问题描述: 给定两个序列X={x1,x2,…,xm}和Y={y1,y2,…,yn},找出X和Y的最长公共子序列.(给定两个序列X和Y,当另一序列Z既是X的子序列又是Y的子序列时,称Z是序列X和Y的公共 ...

  4. 「NOI2015」小园丁与老司机

    「NOI2015」小园丁与老司机 要不是这道码农题,去年就补完了NOI2015,其实两问都比较simple,但是写起来很恶心. 先解决第一问,记 \(dp[i]\) 表示老司机到达第 \(i\) 棵树 ...

  5. Delphi中HInstance

    通过测试看出:HInstance.Application.Handle.Self.Handle不是一回事. Self.Handle是窗体句柄: Application.Handle也是个窗体的句柄,不 ...

  6. 深入理解TCP/IP传输层

    传输层:负责数据能够从发送端传到接收端(只需要关注点对点的传输,中间的传输过程一概不管) UDP和TCP UDP(全双工):1.无连接,2不可靠,3.面向数据报 分别表示UDP源端口号.目的端口号.U ...

  7. vue使用html2canvas生成图片并保存到本地

    html2canvas官方文档 http://html2canvas.hertzen.com/ npm下载依赖 npm install html2canvas -S 在需要使用的地方引入 import ...

  8. elementUi vue el-radio 监听选中变化

    //change是radio-group标签的事件 <div> <el-radio-group v-model="radioSex" @change=" ...

  9. vue学习整理

    1.webpack+vue自定义路径别名 vue-cli 用的是webpack,也可以使用webpack自定义别名这个功能,自定义别名这个功能当你在多层文件夹嵌套的时候不必一层一层找路径,直接使用自定 ...

  10. CRM BP函数

    REPORT ZCRM_BP_TEST. """""""""""""& ...