react 保持组件纯粹

     部分 JavaScript 函数是 纯粹 的,这类函数通常被称为纯函数。纯函数仅执行计算操作,不做其他操作。你可以通过将组件按纯函数严格编写,以避免一些随着代码库的增长而出现的、令人困扰的 bug 以及不可预测的行为。但为了获得这些好处,你需要遵循一些规则。

纯函数:组件作为公式 

在计算机科学中(尤其是函数式编程的世界中),纯函数 通常具有如下特征:

  • 只负责自己的任务。它不会更改在该函数调用前就已存在的对象或变量。
  • 输入相同,则输出相同。给定相同的输入,纯函数应总是返回相同的结果。

举个你非常熟悉的纯函数示例:数学中的公式。

考虑如下数学公式:y = 2x。

若 x = 2 则 y = 4。永远如此。

若 x = 3 则 y = 6。永远如此。

若 x = 3,那么 y 并不会因为时间或股市的影响,而有时等于 9 、 –1 或 2.5。

若 y = 2x 且 x = 3, 那么 y 永远 等于 6.

我们使用 JavaScript 的函数实现,看起来将会是这样:

function double(number) {return 2 * number;
}

上述例子中,double() 就是一个 纯函数。如果你传入 3 ,它将总是返回 6

React 便围绕着这个概念进行设计。React 假设你编写的所有组件都是纯函数。也就是说,对于相同的输入,你所编写的 React 组件必须总是返回相同的 JSX。

当你给函数 Recipe 传入 drinkers={2} 参数时,它将返回包含 2 cups of water 的 JSX。永远如此。

而当你传入 drinkers={4} 时,它将返回包含 4 cups of water 的 JSX。永远如此。

就像数学公式一样。

你可以把你的组件当作食谱:如果你遵循它们,并且在烹饪过程中不引入新食材,你每次都会得到相同的菜肴。那这道 “菜肴” 就是组件用于 React 渲染 的 JSX。

function Recipe({ drinkers }) {return (<ol>    <li>Boil {drinkers} cups of water.</li><li>Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.</li><li>Add {0.5 * drinkers} cups of milk to boil and sugar to taste.</li></ol>);
}export default function App() {return (<section><h1>Spiced Chai Recipe</h1><h2>For two</h2><Recipe drinkers={2} /><h2>For a gathering</h2><Recipe drinkers={4} /></section>);
}

副作用:(不符合)预期的后果 

React 的渲染过程必须自始至终是纯粹的。组件应该只 返回 它们的 JSX,而不 改变 在渲染前,就已存在的任何对象或变量 — 这将会使它们变得不纯粹!

let guest = 0;function Cup() {// Bad: changing a preexisting variable!guest = guest + 1;return <h2>Tea cup for guest #{guest}</h2>;
}export default function TeaSet() {return (<><Cup /><Cup /><Cup /></>);

该组件正在读写其外部声明的 guest 变量。这意味着 多次调用这个组件会产生不同的 JSX!并且,如果 其他 组件读取 guest ,它们也会产生不同的 JSX,其结果取决于它们何时被渲染!这是无法预测的。

回到我们的公式 y = 2x ,现在即使 x = 2 ,我们也不能相信 y = 4 。我们的测试可能会失败,我们的用户可能会感到困扰,飞机可能会从天空坠毁——你将看到这会引发多么扑朔迷离的 bugs!

你可以 将 guest 作为 prop 传入 来修复此组件:

function Cup({ guest }) {return <h2>Tea cup for guest #{guest}</h2>;
}export default function TeaSet() {return (<><Cup guest={1} /><Cup guest={2} /><Cup guest={3} /></>);
}

现在你的组件就是纯粹的,因为它返回的 JSX 只依赖于 guest prop。

一般来说,你不应该期望你的组件以任何特定的顺序被渲染。调用 y = 5x 和 y = 2x 的先后顺序并不重要:这两个公式相互独立。同样地,每个组件也应该“独立思考”,而不是在渲染过程中试图与其他组件协调,或者依赖于其他组件。渲染过程就像是一场学校考试:每个组件都应该自己计算 JSX!

说白了 就是一个参数问题  你不用参数传递 计算  就会出现太多不可能性 因为外面的变量会错误啥的 但是 你用参数 传递的话  相当于把这个公式传死了 只能这样传 固定了一样 就是表达的这个意思

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/843129.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WMS仓库管理系统是怎么操作的?WMS操作流程详解

WMS 是仓库管理系统(Warehouse Management System) 的缩写。通过标准化的来料管理、拣配管理、仓库管理&#xff0c;打造实时化、透明化、可视化的仓储管理体系。一款合格的wms系统具有以下优势 提供实时可视性和自动化仓储流程&#xff0c;帮助企业更好地应对复杂的供应链网络…

打造高质感的电子画册,这篇文章告诉你

​在数字化时代&#xff0c;电子画册作为一种全新的视觉传达方式&#xff0c;正逐渐成为各行各业展示形象、传播信息的重要工具。相较于传统的纸质画册&#xff0c;电子画册具有更高的质感、更好的互动性以及更低的制作成本&#xff0c;使得它愈发受到众多企业的青睐。那样怎么…

linux学习(六)

1.网络管理 (1)查看 ifconfig: root用户可以查看网卡状态, 普通用户: /sbin/ifconfig(需要加上命令的完整路径) (2)修改网络配置 通过命令修改网络配置 设置网卡的ip地址;禁用网卡和启用网卡了。 添加网关: (3)网络故障查询 ①ping 检测当前主机和目标主机是…

杨若歆发布最新单曲《迷雾之谜》从啦啦女神到音乐新星的华丽转身

5月28日&#xff0c;台北——杨若歆&#xff0c;这位被粉丝封为"啦啦女神"的多才多艺艺人&#xff0c;近日推出了她的最新单曲《迷雾之谜》&#xff0c;这首歌曲以其空灵的旋律和杨若歆独特的高音&#xff0c;迅速在歌迷中引起了热烈的反响。 杨若歆&#xff0c;身高…

nginx 安全配置

1、前言 前后端分离后&#xff0c;nginx 作为跨域转发工具在日常应用中越来越广泛&#xff0c;它的安全性不能不能忽略。 2、nginx 安装相关说明 2.1 直接下载安装包 在nginx官网下载编译好的安装包&#xff0c;链接地址为nginx: download。如果是linux系统&#xff0c;直接使…

720VR三维立体小程序源码系统 手机电脑端自适应 前后端分离 带完整的安装代码包以及搭建教程

系统概述 720VR 三维立体小程序源码系统是基于先进的技术和理念打造而成的综合性平台。它融合了虚拟现实技术、移动互联网技术以及计算机编程技术&#xff0c;旨在为用户提供沉浸式的 720 度全景体验。 该系统的设计充分考虑了用户的需求&#xff0c;无论是在手机端还是电脑端…

vue-cli2项目中使用scss

前言&#xff1a; 首先要搞清楚Sass和Scss的区别&#xff1a; 实际上Sass和Scss是同一种东西&#xff0c;Scss是 Sass3 引入新的语法&#xff0c;它们都是css预处理器。通常称为Sass&#xff0c;但存在两种不同的语法风格&#xff1a; 文件扩展名&#xff1a;Sass 默认…

探索Python的包与模块:构建项目的基石

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、模块与包的基础认知 1. 模块的定义与创建 2. 包的组织与管理 二、模块与包的进阶使用…

懒人创业秘诀揭秘:加入萤瓴优选项目,普通人也能打开财富大门

创业对于很多人来说&#xff0c;是一个艰难而复杂的过程。然而&#xff0c;时代的发展带来了新的机遇&#xff0c;懒人创业成为了一种趋势。加入萤瓴优选项目&#xff0c;普通人也能轻松打开财富大门。本文将揭秘懒人创业的秘诀&#xff0c;并分析萤瓴优选项目如何帮助普通人实…

极致产品力|从toB到toC,年销4.2亿份的冻干品牌是如何炼成的?

天野食品是日本冻干食品长红40年的品牌&#xff0c;从制造焦糖的小工厂&#xff0c;转变为日本冻干速食的行业第一&#xff0c;它是如何做到的呢? 深耕TOB业务&#xff0c;如何在ToC业务创造增长 天野公司以冻干食品闻名但并非以此起家。自1940年成立以来&#xff0c;便以染料…

tomcat不定时宕机,Failed to write core dump

在linux上的tomcat部署的web应用&#xff0c;不定时会自动挂掉&#xff0c;排查tomcat安装路径/logs/catalina.out 发现提示Failed to write core dump. Core dumps have been disabled. To enable core dumping, try "ulimit -c unlimited" before starting Java a…

前端本地项目启动供后端或者测试调试

目录 1、项目本地启动的地址 2、打开终端输入 ifconfig 查找ip 3、将localhost替换成ip即可供他人测试 1、项目本地启动的地址 http://localhost:8100/?module220&webRoutevpc-gray&backRoutevpc-gray........................... 2、打开终端输入 ifconfig 查找i…

DreamPose: Fashion Image-to-Video Synthesis via Stable Diffusion

UW&UCB&Google&NVIDIA ICCV23https://github.com/johannakarras/DreamPose?tabreadme-ov-file 问题引入 输入参考图片 x 0 x_0 x0​和pose序列 { p 1 , ⋯ , p N } \{p_1,\cdots,p_N\} {p1​,⋯,pN​}&#xff0c;输出对应视频 { x 1 ′ , ⋯ , x N ′ } \{x_1,…

智慧园区:打造未来城市的新模式

随着城市化进程的加速和科技创新的推动&#xff0c;城市面临着诸多挑战和机遇。如何提升城市的竞争力和可持续性&#xff0c;是一个亟待解决的问题。在这个背景下&#xff0c;智慧园区作为一种新型的城市发展模式&#xff0c;引起了越来越多的关注和探索。 什么是智慧园区&…

天若OCR 识别 (本地文字识别转换工具)

前言 天若OCR文字识别本地版是一款在天若OCR文字识别工具v5.0免费开源版的基础上采用Chinese-lite框架和Paddle-ocr框架本地化识别接口编译而成,无需联网也无需申请密钥&#xff0c;纯本地运算&#xff0c;识别准确度和速度很快&#xff0c;操作和天若OCR免费版一样&#xff0…

如何将短信从 iPhone 传输到计算机 - 5 种灵活的方式

概括 与他人交流的多种方式之一是发送短信。对于那些包含珍贵回忆或重要信息的消息&#xff0c;您需要将它们发送到另一台设备&#xff08;例如计算机&#xff09;进行备份。将短信文件发送到计算机是保存宝贵数据的最佳方法之一。继续阅读本文&#xff0c;了解如何将短信从 i…

gitlab将本地文件项目上传至gitlab服务

打开gitlab网页界面&#xff0c;登陆管理员账号 &#xff08;测试服务器安装的gitlab&#xff0c;浏览器输入ip或配置的gitlab地址&#xff09; 创建新项目 使用gitlab创建项目 创建一个新项目&#xff08;忽略分组&#xff09; &#xff08;忽略分组&#xff09; 在创建工…

决策树算法实战

本实战主要目标是讲解如何使用sklearn库来构造决策树&#xff0c;包括其中的一些参数的使用&#xff0c;以及参数调优对模型精确度的影响。 1. 数据处理 导入Pandas和Matplotlib两个库。 # 导入Pandas和Matplotlib两个库 %matplotlib inline import matplotlib.pyplot as pl…

动态规划part02 Day42

LC62不同路径 LC63不同路径II(超时10min) 超时原因分析&#xff1a;思路想错了&#xff0c;即便是正确思路初始化也有点问题&#xff0c;应该将不必要的判断逻辑引入初始化的过程中初始化&#xff1a; 从左上角到[i][0]和[0][j]都只有一条路径dp[i][0]1和dp[0][j]1引入故障&am…

URL跳转

1.URL介绍 开放重定向&#xff08;Open Redirect&#xff09;&#xff0c;也叫URL跳转漏洞&#xff0c;是指服务端未对传入的跳转url变量进行检查和控制&#xff0c;导致诱导用户跳转到恶意网站&#xff0c;由于是从可信的站点跳转出去的&#xff0c;用户会比较信任。 2.URL跳…