11 父子组件数据关系与状态提升

含义

  • 状态提升:两个组件(无父子关系)共享一个数据并且同步数据变化
  • 类组件调用(实例化)的时候,组件内部的状态是唯一且独立的
  • 组件嵌套与调用,和是类组件(render)还是函数组件(直接return)没有关系
  • 类组件与函数组件是可以相互嵌套调用的
    在这里插入图片描述

单向数据流
数据的流动 父 → 子 props向下传递
props只读数据 → props →数据操作 → 父组件来完成 → 数据由父组件管理
状态提升 → 本应该是子组件的状态 → 父组件来保存与操作 → 通过props → 子组件

class NameInput extends React.Component {render() {return (<div>{this.props.index}个:<input type="text" value={this.props.name} onChange={this.props.changeFn} /></div>)}
}
class App extends React.Component {state = {name: ''}changeName = (e) => {this.setState({name: e.target.value})}render() {return (<div><NameInput index="1" name={this.state.name} changeFn={this.changeName} /><NameInput index="2" name={this.state.name} changeFn={this.changeName} /></div>)}
}
ReactDOM.render(<App />,document.getElementById('app')
)

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

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

相关文章

SQL SERVER 一个SQL语句的执行顺序

SQL SERVER 一个SQL语句的执行顺序 原文:SQL SERVER 一个SQL语句的执行顺序一个SQL 语句的执行顺序 1、From (告诉程序 来自哪张表 如果是表表达式 依旧是如此顺序) 2、Where&#xff08;条件筛选 谓词筛选 &#xff09; 3、Group by&#xff08;分组&#xff09; 4、Having&…

JS-事件内置对象event

getKeyCode(event)当中的event必须全部小写&#xff0c;是JS中时间内置对象&#xff0c;可以直接拿来用&#xff0c;event内种对象代表此刻发生的事件 1 <!doctype html>2 <html lang"en">3 <head>4 <meta charset"UTF-8">5 …

工具分享 --- 分享一个在线制作ico的网站

还不错… 生成后一般放在imgs的下面. link:favicon tab 导入链接http://www.faviconico.org/

laravel迁移文件

laravel迁移文件的命令 Laravel鼓励敏捷、迭代的开发方式&#xff0c;我们没指望在第一次就获得所有正确的。我们对于自己编写代码,可以通过迁移文件,不断的重复去测试.对于工作&#xff0c;我们开发一个完整的项目,是需要我们每个人相互配合,就好比用svn,git版本控制工具来存储…

12 组合与继承、CSS Module

组合与继承 若Container内部有内容&#xff0c;React会在props内部增加children属性若Container内部有非元素内容&#xff0c;children&#xff1a;非元素内容若Container内部有单个元素内容&#xff0c;children&#xff1a;React元素对象若Container内部有多个元素内容&…

工具分享 --- tinyPNG,大图片压缩工具

今天自己的写的项目跑在了远程服务器上… 图片加载的速度让人难以接受, 于是各种百度找到了一个在线找到了个图片压缩的网站 TinyPNG 可以看一下压缩的效果…真心不错啊… 网站如下: https://tinypng.com 额…有些大于5M的需要钱,才能压缩… 用系统画图工具…貌似也能压缩… …

Mysql 忘记管理员密码更改

对管理员设置密码第一种方式&#xff1a;#mysqladmin -u root password new-password;#mysqladmin -u root -h localhost password new-password;mysql的选项可以不带空格&#xff0c;有时候带空格是错 第二种方式&#xff1a; set password for rootlocahostPASSWORED(); 第三…

ironic如何支持部署时按需RAID?

ironic如何支持部署时按需RAID&#xff1f; 新浪大神推荐使用element proliant-tools制作deploy image。element proliant-tools会在ipa ramdisk中安装一个rpm包hpssacli&#xff08;HP的RAID管理工具&#xff09;&#xff0c;和一个python module proliantutils&#xff08;里…

14 代码分割之lazy:Suspense与路由懒加载

lazy内置方法 Suspense内置组件 lazy是React提供的懒&#xff08;动态&#xff09;加载组件的方法&#xff0c;React.lazy() 能减少打包体积、延迟加载首屏不需要渲染的组件 依赖内置组件Suspense&#xff1a;给lazy加上loading指示器组件的一个容器组件 Suspense目前只和la…

三年工作的总结

其实开通博客已经有四年之久了,但遗憾的是从来没有认真写过一篇博客,只是在平时会浏览一些大牛写过的博客。 其实我觉得做技术的定期总结自己的经验还是很重要的。 不知不觉参加工作已经三年了,三年时间真的过得很快,想当初带着一腔热血,一个背包走天下,来到上海,从零开始&…

css --- 兄弟选择器

语法: /* 查找后边的一个兄弟元素 */ 兄弟元素 兄弟元素/* 查找后边的所有兄弟元素 */ 兄弟元素 ~ 兄弟元素<head><style>#maindiv {color: red;}#main~div {background-color: #e0e0e0;}</style> </head> <body><div id"main"&g…

面向对象特征:封装、多态 以及 @propetry装饰器

&#xff08;继承补充&#xff09;组合objfun()#对象obj.attrfoo()#对象的属性等于另一个对象什么是组合&#xff1a; A类的对象具备某一个属性&#xff0c;该属性的值是B类的对象基于这种方式就把A类与B类组合到一起对象既能使用A类中的数据与功能&#xff0c;也能使用B类中的…

15 错误边界与使用技巧

错误边界 React16增加防止某个组件的UI渲染错误导致整个应用崩溃子组件发生JS错误&#xff0c;有备用的渲染UI错误边界是组件&#xff0c;只能用class组件来写 错误边界组件捕获错误的时机 渲染时生命周期函数中组件树的构造函数中 getDerivedStateFromError 生命周期函数…

深入探究Spark -- Cluster Manger部署(最常用为YARN实现Task Scheduler)

部署方式有&#xff1a;Standalone&#xff08;Spark的Deploy模块&#xff09;、Mesos、YARN、EC2、LocalSparkContext创建时&#xff0c;通过传入的Master URL不同&#xff0c;创建不同的SchedulerBackend和TaskScheduler&#xff0c;在spark.SparkContext#createTaskSchuster…

es6 --- Promise.all等待多个异步任务执行

项目中遇到一个问题,要用多个http请求,获取数据,然后将获取的数据统一处理… 第一反应想到用promise.all来做… 下面进入主体 // 首先使用promise封装http请求. function getListByDetecttype (params) {return new Promise((resolve, reject) > {let param params ? par…

16 代码分割之错误边界与Suspense和命名导出

代码分割之错误边界与Suspense const Main React.lazy(() > import(./main)) class ErrorBoundary extends React.Component {state {hasError: false,}static getDerivedStateFromError(err) {console.log(getDerivedStateFromError err, err)return {hasError: true}}c…

Python 原生爬虫

Python3 实现游戏主播人气排行榜 from urllib import request import re# 爬取某个游戏主播的人气&#xff08;每个游戏主播的观看人数&#xff09;排行榜 爬虫前奏&#xff1a;明确爬虫目的找到数据对应的网页分析网页的结构找到数据所在的标签位置模拟HTTP请求&#xff0c;向…

Mac 下查看网络端口占用情况

1、Mac 下查看网络端口占用情况 有的时候关闭了服务器&#xff0c;但是端口还是占用&#xff0c;解决的方法是 kill 掉占用该端口的进程。 # 查看 8009 端口的占用情况 $ lsof -i:8009 可以看到&#xff0c;该端口被 id 为 4215 的进程所占用&#xff0c;这个时候直接在命令…

javascript --- 变量提升的理解

看下面一段代码: (function () {var x foo();var foo function foo () {return "foobar";};return x; })();(不许打出来)猜猜返回结果是什么… 答案是 // foo is not a function下面来解释为什么会这样,首先得明白: 1.如果变量声明了但未赋值,则会显示undefined…

17 初探Context的使用场景

context 容器&#xff08;即上下文&#xff09; → 装数据 → 可以传递到程序的多个地方程序在执行时可访问的容器 import styles from ...则css要写module.css&#xff0c;否则无效果&#xff1b; import from ...则css无须写module. &#xff0c;否则无效果 使用 context.j…