react 官网笔记 06 状态提升

最新推荐文章于 2024-10-14 22:16:07 发布
最新推荐文章于 2024-10-14 22:16:07 发布
阅读量119 收藏
点赞数
分类专栏： react官网阅读笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dsdaq212zwsdas/article/details/79296112
版权

 如果两个相邻的组件想要使用相同的state去渲染组件,要实现一个组件内部的逻辑更改state也会让相邻组件的ui更改,就需要使用'状态提升'了,原理就是把model提升到离他们最近的公共父组件中,通过props传递给子组件, 但是遇到一个问题,因为props是不应该被改变的,在子组件中无法通过setState控制他们.

 一种方法是,父组件不仅在props中传递数据,同时把handler也传递进来,通过子组件调用props.handler来修改父组件的state.从而触发父组件的render来达到重新渲染子组件

 原则:如果一个组件的数据放在props或者state都可以的话,那他就不应该放到state中

dsdaq212zwsdas
关注
专栏目录
ReactNative学习笔记
weixin_68658847的博客
10-04 1097
ReactNative学习笔记
个人笔记(react个人笔记)
11-03
10. **CSS-in-JS**：React社区有许多解决样式问题的方案，如styled-components、emotion等，它们允许在JSX中写CSS，提升样式管理和组件化体验。 11. **React Native**：如果扩展到移动开发，React还有React Native...
React学习笔记——状态提升
MRlaochen的博客
12-25 209
废话少说，直接谈主题，React中的兄弟组件简单通信，就是所谓的状态提升。 先定义一个父组件parent和两个子兄弟组件child1和child2。 父组件（父组件因为用到状态，所以考虑用类组件） import React, { Component } from 'react'; //引入两个子组件 import Child1 from './Child1' import Child2 from './Child2' class Parent extends Component { constructo
react学习笔记
weixin_43024757的博客
07-10 1282
不是响应式，所以他不会监听直接对对象、数组的修改，通常都需要整个替换来实现，官方建议使用。中的含义是“记忆”，或可以理解为“状态”，但是不是。时会触发组件重新渲染，即组件内部的表达式会重新计算。树结构没有发生变化，相同的位置还是渲染了相同的组件。想硬要他们保留的话，那可以给他们设置一个相同的。并不是响应式的，在下面的例子中，如果不调用。但是当我这么一改，他就不会清空那个位置的。渲染两个计数器，第二个计数器的。没有变化，那么这个组件内部的。渲染出来的东西，一般被称作。它的原理是，直接修改。
React学习笔记
maohe的博客
10-14 975
React学习笔记，快速上手。
React学习笔记（二）
qq_45243719的博客
02-05 2004
{show && <div>是否展示
react 官网学习笔记
AinUser的博客
08-13 206
1. 元素 (html片段) 和组件的关系 (js函数) 2. 写组件的方式 (function还是class) 3. 一个括号和两个括号的使用场景{ } (获取值/js函数调用) {{ }} 4. props和render都是做什么的 5. redux管理的哪些状态 6. constructor和构造函数区别 7. 组件名称必须大写 (html里面写自定义组件，相当于直接调用js函数) 8. 组合组件 (html直接调用组件 [js函数]，避免直接操作DOM，主客颠倒/角色互换) 9. .
react笔记
qq_40121308的博客
12-11 1113
当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。必须以"use"开头吗？必须如此，这个约定非常重要，不遵循的话，由于无法判断某个函数是否包含对某内部Hook的调用，React将无法自动检查你的Hook是否违反了HooK的规则。
React 学习笔记
w530763509的博客
06-27 556
特性声明式设计 React采用声明范式,可以轻松描述应用高效 React通过对DOM的模拟(虚拟dom),最大限度地减少与DOM的交互Diff算法可以解决灵活 React可以与已知的库或框架很好的配合JSX JSX是Javascript语法的扩展组件 通过React构建组件,是的代码更加容易得到复用,能够更好地应用在大项目的开发中单项响应的数据流 React实现了单项响应的数据流,从而减少了重复代码,这又是他为什么比还童数据绑定更简单虚拟DOM传统DOM更新。
学习React(状态管理)
qq_63170044的博客
07-23 971
随着你的应用不断变大，更有意识的去关注应用状态如何组织，以及数据如何在组件之间流动会对你很有帮助。冗余或重复的状态往往是缺陷的根源。在本节中，你将学习如何组织好状态，如何保持状态更新逻辑的可维护性，以及如何跨组件共享状态。
React学习笔记：状态提升、受控/非受控组件与组件通信
1. **状态提升（State Management）** 子组件与父组件之间的状态传递有两种方式： - 子传父：在子组件中定义一个自定义函数，并在`componentDidMount`生命周期方法中通过props将子组件的状态`num`传递给父组件。当...
react教学笔记，从入门到精通
06-06
8. **性能优化**：React通过虚拟DOM（Virtual DOM）提升性能，但还可以通过PureComponent、shouldComponentUpdate、React.memo等手段进一步优化。 9. **服务端渲染（SSR）**：为了提高SEO和首屏加载速度，React支持...
vue和react学习笔记.rar
10-26
虚拟DOM同样是React的关键特性，它允许高效地计算出最小的DOM变更，以提升性能。React还提供了状态管理和生命周期管理，以及React Hooks等高级功能，如useState、useEffect等，让函数组件也能处理状态和副作用。 ...
React框架er-paper-mas开发笔记
06-11
在本篇React框架er-paper-mas的开发笔记中，我们将深入探讨如何利用React.js这个流行的JavaScript库来构建高效、可维护的应用程序。React是Facebook推出的一款用于构建用户界面的库，尤其适合构建复杂的单页应用...
AS SSD Benchmark
最新发布
11-11
硬盘测试工具
com.harmonyos4.exception.ScalabilityLimitationException.md
11-11
鸿蒙开发中碰到的报错，问题已解决，写个文档记录一下这个问题及解决方案
高级项目管理论文-人力资源管理
11-11
这是一篇高级信息系统项目管理师关于人力资源管理的参考论文。本论文结合实际项目案例，详细阐述了在项目管理过程中关于进度管理的一些关键方面，适用于正在进行高项备考的人。
Python开发的学生信息管理系统控制台程序：含源码、可执行文件（exe）、程序配置与使用说明书
11-11
一、项目简介 本项目是一套基于Python开发的学生信息管理系统控制台程序，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Python学习者。 包含：项目源码、项目文档、数据库脚本等，该项目附带全部源码可作为毕设使用。 项目都经过严格调试，确保可以运行！ 二、开发环境要求 本系统的软件开发及运行环境具体如下。 操作系统：Windows 7、Windows 10。 Python版本：Python 3.7.0。 开发工具：Python IDLE。 Python内置模块：os、re。 三、系统功能 录入学生信息，包含学生编号、学生名字、英语成绩、Python成绩和C语言成绩 查找学生信息，根据学生ID或者学生编号查询 删除学生信息 修改学生信息 排序 统计学生总人数 显示所有学生信息 退出系统 详见 https://blog.csdn.net/weixin_43860634/article/details/132733053
com.harmonyos.exception.OperatingSystemCrashException(解决方案).md
11-11
鸿蒙开发中碰到的报错，问题已解决，写个文档记录一下这个问题及解决方案
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值