React状态提升、列表、key、受控与非受控简单说明

已于 2022-03-16 14:51:23 修改
阅读量525 收藏
点赞数
分类专栏： React基本使用 文章标签： react.js javascript 前端
于 2022-03-16 14:50:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40665659/article/details/123526355
版权
本文介绍了React中利用map等方法生成列表及设置key的重要性，强调了key值的唯一性和作用于diff算法。同时，阐述了受控组件与非受控组件的概念，以及何时选择使用它们。状态提升部分解释了如何在父组件中管理共享状态，以实现子组件间的通信。
摘要由CSDN通过智能技术生成

React状态提示、列表、key简单说明

react中生成列表，其实react需要的还是虚拟DOM,所以我们可以结合jsx语法规则返回虚拟DOM,用数组map和forEach或者其它数据处理的手法，就会得到一个列表 ；组建key值的作用，因为react最大的优点之一就是虚拟DOM的比较，减少对真实DOM的操作，这里涉及到diff算法后面可以讲解，记住一些简单知识，兄弟直接key值不能相同，不同的组建key值可以相同，key值最好唯一，key值应该给上下文组建，而不是最后一级的标签。

consloe.log('')

何为受控组件与非受控组件
就是受控组件，随着组件状态的变化而变化，而非受控组件则不随组件状态的变化而变化
什么时候使用受控组件和非受控组件，其实受控制组件就把状态替代了DOM节点，获取节点方式不一样而已，有一些HTML标签，比如input
、select有value属性 value:{this.state.value} 受到状态的控制，非受控组件可以借助 creatRef()获取输入框的值

在这里插入代码片

状态的提升
简单来说，就是两个子组件共享同一个状态，所以把状态设置在最近的父组件中，父组件再通过props状态，状态数据和函数
，传递函数的原因，是为了子组件传递数据给父组件，这样子组件就间接的影响共享状态。

在这里插入代码片
齐烟九点~天绮爵
关注
专栏目录
React.js 官方资料摘记：状态提升
TROUBLE I AM IN
06-20 1467
所谓状态提升，就是把子组件要传递给父组件的数据直接保存在父组件中。
react 状态不变_在React中处理状态：需要考虑的四种不变方法
cumian8165的博客
07-15 745
react 状态不变by Cory House 由科里·豪斯(Cory House)设计 Perhaps the most common point of confusion in React today: state. 今天，React中最常见的混乱点是：状态。 Imagine you have a form for editing a user. It’s common to create...
React状态提升
刚刚好
03-15 226
React状态提升 React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件上.在父组件上改变这个状态然后通过props分发给子组件. 子组建1 class One extends React.Component { constructor(props) { super(props); } render(){ return ( ...
react 怎么获取表格_javascript – 如何从React中的输入字段获取表单数据
weixin_29635919的博客
02-11 240
构造函数和函数：constructor(props) {super(props);this.state = {tagline: 'We rank what people are talking about.',year: new Date().getFullYear()};this.onFormSubmit = this.onFormSubmit.bind(this);}onFormSubmit(...
5款 React 实时消息提示通知(Message/Notification)组件推荐与测评
蒋川@卡拉云
06-04 3786
React 消息提示通知组件（Message / Notification）是我们日常开发中经常使用的组件，它可用作与用户交互的反馈提示，信息提交成功、错误、操作警告等场景使用。原生JavaScript 提供了alert、prompt、confirm 等方法，这三个方法的不支持定制化，使用场景严重受限，特别是 alert 在浏览器外弹窗，体验非常糟糕。因此要想给用户提供良好的使用体验，我们需要封装一个定制化较好的 React 消息提示组件，这种组件看似简单，但也存在非常多深坑要小心，例如遮罩层、消失时间、点
react受控组件和非受控组件
M106588L的博客
09-09 225
这个小案例就是总结了受控组件的意思，还有react子父传参的例子哦,忘记受控组建的小伙伴们可以看看啊 App.js import React, { Component } from 'react' import Top from "./top" import Comment from "./comment" import "./style.css" class App extends Compo...
antd mobile 作者教你写 React 受控组件和非受控组件
萧然自我的博客
07-06 659
“关注作者：https://www.zhihu.com/column/c_1455925261150105600”曾经，我每次面试时几乎都会问一个问题：antd 中的 Input 组件是受控组件还是非受控组件？有些人会毫不犹豫的回答：是受控组件，因为有 value 和 onChange，而另外也有一些人会比较犹豫，因为的确似乎说 Input 是受控组件或非受控组件都说得过...
react基础-列表渲染-条件渲染-refs-受控元素-非受控元素
Youthful_Dreams的博客
04-01 173
1 列表渲染 //对象 数组 string 数字 this.props|state.属性名.map(function(val,index){ return jsx }) import {render} from "react-dom"; import {Component} from 'react' class Demo extends Component{ state = { str: "bmw", num: 10,
React（2）—— React组件、组件实例三大属性、事件处理、受控组件与非受控组件、高阶函数(1)
qiqiyuer的博客
04-04 966
/ 2. 渲染组件到页面结果为下：代码解释：执行了ReactDOM.render(< MyComponent/>…之后，发生了什么？React解析组件标签，找到了MyComponent组件。发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。//2.渲染组件到页面结果如下：代码解释：执行了ReactDOM.render(< MyComponent/>…之后，发生了什么？React解析组件标签，找到了MyComponent组件。
react之ref、组件数据承载、事件函数this指向、受控与非受控组件
weixin_45819980的博客
04-21 191
1.ref 给dom或者类组件进行标记 1-1 ref字符串方式，react的严格模式下不建议使用 componentDidMount(){ this.refs.input.focus() } <input ref="input"/> 1-2 回调函数的写法 componentDidMou...
react控制元素的显示或隐藏
热门推荐
马优晨
07-19 5万+
如图所有，当我选择公司性质为 “默认” 或者 “个人” 时候 ‘公司全称’字段是隐藏。当我们选择公司性质为“公司”时 ‘公司全称’字段展示。 默认状态： 公司性质为“公司” 这个功能该如何实现呢？ 思路： 1.在‘公司性质’这个 select框上面绑定一个 onchange事件，每次变化 获取到当前select框 对应的值。 2.将获取到当前select框的值写一个接口...
简单理解 React 状态提升
sunshine_kevin的博客
10-25 1573
这段时间仔细看了看 React 的文档，收获不少，这篇文章我就来说一说其中的一点收获，状态提升 本文不涉及 双向绑定的内容 为什么有状态提升 因为有单向数据流，我们知道，在 React 中，每个组件只关心它内部的状态，甚至组件无法知道自己是函数组件还是 class 组件。所以我们的 state 为一个局部量，或者说是被封装起来的，它只对这个组件内部是有效的，在组件外面或者其他组件中不能直接使用这个...
React学习（状态数据更新）
城南的夏 的博客
05-10 2314
学习目标： 提示：两个小时学会React状态数据更新 例如： 两个小时学会React状态数据更新 学习内容： 提示：学会React状态数据更新 （6）状态数据更新 React特性是单向数据流，也就是所谓的单向数据绑定，数据的更新包含数据模块更新以及视图更新两部分 直接修改变量数据，变量数据更新，但是视图不会同步更新，这就是单向数据流 推荐：更新变量数据，通过this.setState({key: value, key2: value, ...})的形式进行更新，既能更新变量数据，同时也会推送更新视
React学习：状态(State) 和 属性(Props)
若水弹丸之地
04-04 2万+
React ：元素构成组件，组件又构成应用。 React核心思想是组件化，其中 组件 通过属性(props) 和 状态(state)传递数据。 State 与 Props 区别 props 是组件对外的接口，state 是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件...
React 事件系统解析
why404
09-09 761
为什么 React 需要自己实现事件系统
react 安装使用 antd+国际化+定制化主题+样式兼容
Z_Wonderful的博客
09-11 418
react 安装使用 antd+国际化+定制化主题+样式兼容
spring Reactive 响应式编程
m0_37714848的博客
09-11 937
spring reactive program
React源码学习（一）：如何学习React源码
最新发布
kelai_6792的博客
09-14 699
本系列源码学习，是基于 v16.13.1，v17.x与v16.x区别并不太大！
React学习笔记：状态提升、受控/非受控组件与组件通信
总结来说，这份笔记涵盖了React中的状态管理、组件类型（受控/非受控）、跨组件的数据传递以及如何利用高阶组件来增强组件功能。深入理解并实践这些概念有助于提高开发React应用的效率和组件间的交互性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值