React:Lifting State Up
在学习React的组件的时候,我也好奇组件间需要共享状态或通信的时候,React是如何处理的。在文档的QUICK START的提到Lifting State Up(状态提升),并不是什么新鲜东西。只是把几个组件需要共享的状态拿出来放到最近的父组件而已。然后通过传参的方式注入子组件,成为其props。由于子组件获取的状态state_inShare都来自父组件,因此各自的state_inShare是同步的。
In React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called "lifting state up".
这是处理简单的共享状态的一种方式。
当我们把需要共享的状态放到父组件之后。我们就不能在子组件内通过setState方法改变它了,只能在父组件内用setState方法改变。那我们怎么在子组件中调用父组件的setState方法呢?
React的方案是:
在父组件中定义一个处理方法(比如handle(newValue){}),里面执行对state的更新。并将之作为prop传给子组件。
在子组件内部,当状态需要改变时,就调用父组件传递过来的this.props.handle()方法。
比如:
父组件中定义了handle:
//...
handle(t) {
this.setState({temperature:t})
}
//..
<TemperatureInput onTemperatureChange={this.handle} temperature={temperature} />
在子组件<TemperatureInput>中:
//组件中定义处理程序,执行父组件props下来的方法
changeTemp(e) {
this.props.onTemperatureChange(e.target.value);
}
//用户交互时改变了Temperature
<input type="text" value={temperature} onChange={this.changeTemp} />
其实就是曲线救国嘛。。。。
React:Lifting State Up的更多相关文章
- react 中state与props
react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...
- [React] Update State in React with Ramda's Evolve
In this lesson we'll take a stateful React component and look at how we can refactor our setState ca ...
- React给state赋值的两种写法
如果你看过React的官方文档,就会对怎么给局部state赋值有一定的了解.如下代码: class Test extends React.Component { constructor(props) ...
- Recoil & React official state management
Recoil & React official state management Redux Recoil.js https://recoiljs.org/ A state managemen ...
- React & update state with props & Object.assign
React & update state with props & Object.assign Object.assign({}, oldObj, newObj) https://re ...
- 七天接手react项目 —— state&事件处理&ref
state&事件处理&ref 在 react 起步 一文中,我们学习了 react 相关知识:jsx.组件.props.本篇将继续研究 state.事件处理和ref. state St ...
- [React Fundamentals] State Basics
State is used for properties on a component that will change, versus static properties that are pass ...
- [React Native] State and Touch Events -- TextInput, TouchableHighLight
In React, components manage their own state. In this lesson, we'll walk through building a component ...
- [React] React Fundamentals: State Basics
State is used for properties on a component that will change, versus static properties that are pass ...
随机推荐
- Jest 前端单元测试工具
Jest和enzyme 前端单元测试工具 什么是Jest? Jest是一个令人愉悦的JavaScript测试框架,其重点是简单性. 它适用于使用以下项目的项目:Babel,TypeScript,Nod ...
- [Windows] 如何通过 mount point 找到对应的 VHD 文件
假设有一个 Virtual Disk(VHD) 文件.已经 online --> attach --> mount. 知道 mount 的文件夹,要找到 .vhd 文件.可以用如下方法: ...
- 突然地心血来潮,为 MaixPy( k210 micropython ) 添加看门狗(WDT) C 模块的开发过程记录,给后来的人做开发参考。
事情是前几天群里有人说做个看门狗不难吧,5分钟的事情,然后我就怼了几句,后来才发现,原来真的没有看门狗模块鸭. 那好吧,那我就写一下好了,今天是(2020年4月30日)想着最后一天了,不如做点什么有价 ...
- 【EditPlus】参数设置
1. 设置javac,java快捷键 工具-参数设置-工具-用户工具 组和工具项-组名,更改组名为“java” 添加工具 javac 菜单文字:javac 命令:安装java的javac.exe的绝对 ...
- 记django从1.11.7升级到2.0.1
第一步:升级django之后记录下django等其他相关依赖包的版本号. 在terminal中输入 pip freeze, 获取所有包的版本号.为了在升级不成功后可以回到低版本. 第二步:卸载再重装d ...
- 【ejabberd】安装XMPP服务器ejabberd(Ubuntu 12.04)
ejabberd ejabberd is a free and open source instant messaging server written in Erlang/OTP. ejabberd ...
- 手把手教你用Node.js爬虫爬取网站数据
个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! 开始之前请先确保自己安装了Node.js环境,还没有安装的的童鞋请自行百度 ...
- RHCS图形界面建立GFS共享下
我们上面通过图形界面实现了GFS,我们这里使用字符界面实现 1.1. 系统基础配置 5台节点均采用相同配置. 配置/etc/hosts文件 # vi /etc/hosts 127.0.0. ...
- 第十届山东省赛L题Median(floyd传递闭包)+ poj1975 (昨晚的课程总结错了,什么就出度出度,那应该是叫讨论一个元素与其余的关系)
Median Time Limit: 1 Second Memory Limit: 65536 KB Recall the definition of the median of elements w ...
- 图论--最短路--SPFA模板(能过题,真没错的模板)
[ACM常用模板合集] #include<iostream> #include<queue> #include<algorithm> #include<set ...