React的状态提升和组合

React的状态提升

通常,多个组件需要反映相同的变化数据,这时我们建议将共享状态提升到最近的共同父组件中去

示例:

我们写一个关于热水沸腾的组件,当我们在输入框输入的温度大于100度时,文字会显示热水沸腾。这样有两个输入框分别是摄氏度和华氏度。我们要把他们两个的温度同步。

// 定义两个温度单位
const scaleNames = {c: 'Celsius',//摄氏度f: 'Fahrenheit'//华氏度
};// 摄氏度的转换公式
function toCelsius(fahrenheit) {return (fahrenheit - 32) * 5 / 9;
}// 华氏度的转行公式
function toFahrenheit(celsius) {return (celsius * 9 / 5) + 32;
}// 两个度量单位之间进行转换,使之同步
function tryConvert(temperature, convert) {const input = parseFloat(temperature);if (Number.isNaN(input)) {return '';}const output = convert(input);const rounded = Math.round(output * 1000) / 1000;return rounded.toString();
}// 判断是否沸腾
function BoilingVerdict(props) {if (props.celsius >= 100) {return <p>The water would boil.</p>;}return <p>The water would not boil.</p>;
}// 子组件,主要输入框,已经是否沸腾的判断,要求传入scale 、temperature、onTemperatureChange
class TemperatureInput extends React.Component {constructor(props) {super(props);this.handleChange = this.handleChange.bind(this);}handleChange(e) {this.props.onTemperatureChange(e.target.value);}render() {const temperature = this.props.temperature;const scale = this.props.scale;return (<fieldset><legend>Enter temperature in {scaleNames[scale]}:</legend><input value={temperature}onChange={this.handleChange} /></fieldset>);}
}
// 父组件,进行状态提升。同步两个组件的状态,
class Calculator extends React.Component {constructor(props) {super(props);this.handleCelsiusChange = this.handleCelsiusChange.bind(this);this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);this.state = {temperature: '', scale: 'c'};}handleCelsiusChange(temperature) {this.setState({scale: 'c', temperature});}handleFahrenheitChange(temperature) {this.setState({scale: 'f', temperature});}render() {const scale = this.state.scale;const temperature = this.state.temperature;// 把华氏度转为摄氏度const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;// 把摄氏度转为华氏度const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;return (<div><TemperatureInputscale="c"temperature={celsius}onTemperatureChange={this.handleCelsiusChange} /><TemperatureInputscale="f"temperature={fahrenheit}onTemperatureChange={this.handleFahrenheitChange} /><BoilingVerdictcelsius={parseFloat(celsius)} /></div>);}
}const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Calculator />);

让我们来重新梳理一下当你对输入框内容进行编辑时会发生些什么:

  • React 会调用 DOM 中 <input>onChange 方法。在本实例中,它是 TemperatureInput 组件的 handleChange 方法。
  • TemperatureInput 组件中的 handleChange 方法会调用 this.props.onTemperatureChange(),并传入新输入的值作为参数。其 props 诸如 onTemperatureChange 之类,均由父组件 Calculator 提供。
  • 起初渲染时,用于摄氏度输入的子组件 TemperatureInput 中的 onTemperatureChange 方法与 Calculator 组件中的 handleCelsiusChange 方法相同,而,用于华氏度输入的子组件 TemperatureInput 中的 onTemperatureChange 方法与 Calculator 组件中的 handleFahrenheitChange 方法相同。因此,无论哪个输入框被编辑都会调用 Calculator 组件中对应的方法。
  • 在这些方法内部,Calculator 组件通过使用新的输入值与当前输入框对应的温度计量单位来调用 this.setState() 进而请求 React 重新渲染自己本身。
  • React 调用 Calculator 组件的 render 方法得到组件的 UI 呈现。温度转换在这时进行,两个输入框中的数值通过当前输入温度和其计量单位来重新计算获得。
  • React 使用 Calculator 组件提供的新 props 分别调用两个 TemperatureInput 子组件的 render 方法来获取子组件的 UI 呈现。
  • React 调用 BoilingVerdict 组件的 render 方法,并将摄氏温度值以组件 props 方式传入。
  • React DOM 根据输入值匹配水是否沸腾,并将结果更新至 DOM。我们刚刚编辑的输入框接收其当前值,另一个输入框内容更新为转换后的温度值。

得益于每次的更新都经历相同的步骤,两个输入框的内容才能始终保持同步。

小结

  1. 在 React 应用中,任何可变数据应当只有一个相对应的唯一数据源,并且应该遵循自上而下的数据流规则
  2. 如果某些数据可以由 props 或 state 推导得出,那么它就不应该存在于 state 中

组合

包含关系

通过 JSX 嵌套, 我们可以将任意组件作为子组件传递给它们

子组件

    function FancyBorder(props) {return (<div className={'FancyBorder FancyBorder-' + props.color}>{props.children}    </div>);}

父组件

    function WelcomeDialog() {return (<FancyBorder color="blue"><h1 className="Dialog-title"> Welcome      </h1>      <p className="Dialog-message">       Thank you for visiting our spacecraft!     </p>  </FancyBorder>);}

jcode

方法二:

子组件

    function SplitPane(props) {return (<div className="SplitPane"><div className="SplitPane-left">{props.left}      </div><div className="SplitPane-right">{props.right}      </div></div>);}

父组件

    function App() {return (<SplitPaneleft={<Contacts />      }right={<Chat />      } />);}

jcode

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

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

相关文章

Syslog日志外发

Syslog是一种广泛应用于网络设备、操作系统和应用程序的日志通信协议&#xff0c;通过收集、监控和分析Syslog日志&#xff0c;企业可以有效维护网络安全、故障排除和运营管理。 除了内部监控&#xff0c;有时企业也需要将Syslog日志外发以实现更多的管理和合规需求。在实现Sy…

代码随想录算法训练营DAY45|198.打家劫舍、213.打家劫舍II、337.打家劫舍 III

198.打家劫舍 题目链接&#xff1a;198.打家劫舍 class Solution(object):def rob(self, nums):""":type nums: List[int]:rtype: int"""if len(nums)1:return nums[0]if len(nums)2:return max(nums[0],nums[1])dp[0]*len(nums)dp[0]nums[0]d…

java类中的代码块

代码块&#xff08;初始化块&#xff09;&#xff1a;一般用于初始化数据 1、静态代码块执行优先于非静态代码块 2、类中可以存在多个静态/非静态代码块&#xff0c;且相同类型代码块之间按照声明顺序来执行 静态代码块&#xff1a;static {} ① 随着类的加载而执行 ② 只执行一…

cpu漏洞修复

关于CPU相关漏洞的修复处理_cpu漏洞如何修复 vulnerability spec store bypass: vulnera-CSDN博客

网络编程及练习

定义&#xff1a; 在网络通信协议下&#xff0c;不同计算机上运行的程序进行的数据传输。计算机和计算机之间通过网络进行数据传输 可以使用在java.net包下的技术开发出常见的网络应用程序 常见的软件架构&#xff1a; C/S: Client/Server 客户端/服务器 在用户本地需要下载…

打破数据分析壁垒:SPSS复习必备(四)

一、连续性变量的统计描述与参数估计 1、集中趋势的描述指标 均数&#xff08;Mean&#xff09; 中位数&#xff08;Median&#xff09; 众数&#xff08;Mode&#xff09; 总合&#xff08;Sum&#xff09; 2、离散趋势的描述指标 标准差&#xff08;Std. Deviation&#x…

STM32CubeMX WS2812B灯驱动

一、WS2812B 数据发送速度可达800Kbps。 数据协议采用单线归零码的通讯方式&#xff0c;像素点在上电复位以后&#xff0c;DIN端接受从控制器传输过来的数据&#xff0c;首先送过来的24bit数据被第一个像素点提取后&#xff0c;送到像素点内部的数据锁存器&#xff0c;剩余的…

openssl 命令行生成密钥对,生成hash,PSS填充签名,校验

生成密钥对 openssl genpkey -algorithm RSA -out private_key.pem -pkeyopt rsa_keygen_bits:4096 openssl rsa -pubout -in private_key.pem -out public_key.pem将源文件data.txt生成hash值&#xff08;sha-256&#xff09; openssl dgst -sha256 -binary data.txt > d…

MySQL进阶——SQL优化

目录 1插入数据 1.1 insert 1.2大批量插入数据 2主键优化 3 order by 优化 4 group by 优化 5 limit 优化 6 count 优化 6.1概述 6.2 count用法 7 update优化 1插入数据 1.1 insert 优化方案主要有3种 批量插入数据 Insert into tb_test values(1,Tom),(2,Cat)…

QT 数值型坐标轴有那些?(QValueAxis)

在Qt中&#xff0c;QValueAxis类用于表示数值型坐标轴&#xff0c;它本身没有直接的子类&#xff0c;但它是从QAbstractAxis这个抽象类继承而来的。QAbstractAxis是定义坐标轴属性和行为的基类&#xff0c;而QValueAxis则在此基础上提供了针对数值数据的具体实现。 Qt的图表模…

HarmonyOS开发知识 :扩展修饰器,实现节流、防抖、权限申请

引言 防重复点击&#xff0c;利用装饰器面向切面&#xff08;AOP&#xff09;的特性结合闭包&#xff0c;实现节流、防抖和封装权限申请。 节流 节流是忽略操作&#xff0c;在触发事件时&#xff0c;立即执行目标操作&#xff0c;如果在指定的时间区间内再次触发了事件&…

linux修改root密码

linux修改root密码 在Linux中&#xff0c;可以使用以下几种方法来修改root密码&#xff1a; 方法1&#xff1a;使用passwd命令 该方法是最常见和最简单的方法&#xff0c;使用passwd命令可以直接修改root用户的密码。在终端中执行以下命令&#xff1a; sudo passwd root 系统…

移动端 UI 风格,彰显不凡

移动端 UI 风格&#xff0c;彰显不凡

【车载AI音视频电脑】4/8路AHD 200万像素车载电脑SD卡录像机

产品主要特点&#xff1a; -支持4路实时高清AHD 1080P录像 -SD卡记录数据&#xff08;可支持2张大容量SD卡,最大支持单张256G&#xff09; -支持GPS全球定位, 可选模块 -支持WIFI高速自动下载功能, 可选模块 -内置3/4G模块&#xff0c;实时预览和远程管理&#xff0c; 可选…

汇凯金业:现货黄金投资平仓策略有哪些

现货黄金作为全球投资者广泛关注与参与的财富增值途径&#xff0c;其双向交易制度为市场参与者在不同行情下提供了盈利的可能。然而&#xff0c;如何在波动的市场中把握最佳的平仓时机&#xff0c;从而最大化收益&#xff0c;是所有投资者心中的疑问。正确的平仓策略可以说是现…

YYU系列电子引伸计

型号&#xff1a; YYU-50/10 YYU-50/25 YYU-25/10 YYU-100/10 YYU-100/25 轴向变形引伸计&#xff0c;适用于金属非金属材料的测试。用于测量弹性模量、规定非比例延伸强度、规定总延伸强度、各种延伸率、应变硬化指数等参数。 技术参数 1、应变片阻值&#xff1a;350欧…

vue+echarts ----中国地图 下拉选择省份地图中的省份区域高亮显示以及飞线图的效果

vueecharts ----中国地图 下拉选择省份地图中的省份区域高亮显示以及飞线图的效果 1、父组件核心代码&#xff1a;【/utils/area的详细数据】、【/utils/china详细数据】 <template><div class"center"><div class"digital"><el-se…

排书 IDA*

原题链接 题目描述 给定 n 本书&#xff0c;编号为 1∼n。 在初始状态下&#xff0c;书是任意排列的。在每一次操作中&#xff0c;可以抽取其中连续的一段&#xff0c;再把这段插入到其他某个位置。我们的目标状态是把书按照 1∼n 的顺序依次排列。求最少需要多少次操作。 输…

STM32学习笔记(十一)--SPI总线协议详解

概述&#xff1a;Serial Peripheral Interface&#xff0c;一组多从 传输速率比I2C快 但是线多 无应答 是一种同步&#xff08;具有时钟线需要同步时钟SCL&#xff09;、串行&#xff08;一位一位的往一个方向发送&#xff09;、全双工&#xff08;发送接收同时&#xff09;通…

Rocky9使用cockpitweb登陆时root用户无法登陆

Rocky9使用cockpitweb登陆时root用户无法登陆 [rootlvs ~]# vim /etc/cockpit/disallowed-users [rootlvs ~]# systemctl restart cockpit 取消disallowed-users中的root&#xff0c;即可访问 ip:9090 登陆。