React学习笔记(五) 状态提升

状态提升究竟是什么东西呢？别急，下面让我们一步一步来看看究竟要怎么使用状态提升

假设我们有这样一个需求，提供两个输入框（分别属于两个组件），保证输入框里面的内容同步

好，下面我们先来封装一个输入框组件 Input

class Input extends React.Component {constructor(props) {super(props)// 输入框里的内容保存在组件的 state 当中this.state = { content: '' }this.handleChange = this.handleChange.bind(this)}handleChange(e) {this.setState({ content: e.target.value })}render() {return (<input type='text' value={ this.state.content } onChange={ this.handleChange } />)}
}

然后我们另外定义一个组件 AllInput，在这个组件中包含两个 Input 组件，这样我们就得到两个输入框

class AllInput extends React.Component {constructor(props) {super(props)}render() {// 这里包含两个 `Input`  组件return (<div><Input /><br /><br /><Input /></div>)}
}

好，下一个要解决的问题是怎么使两个输入框的内容同步

在两个 Input 组件中，它们各自的内容保存在各自的 state 当中，要怎么做才能使两个组件共享数据呢？

答案是 状态提升，即将两个组件需要共享的数据保存在共同的父组件中，然后子组件通过 props 获取父组件数据

也就是说，我们可以将两个子组件 Input 的数据保存在它们的父组件 AllInput 当中

我们先来看看怎么修改父组件的定义：

class AllInput extends React.Component {constructor(props) {super(props)// 在父组件中添加 state 对象，用于保存数据this.state = { content: '' }this.handleContentChange = this.handleContentChange.bind(this)}// 定义修改 state 的方法，通过 props 传递给子组件使用// 接收一个参数（新的数据）handleContentChange(newContent) {this.setState({ content: newContent })}render() {// 通过 props 将 state 和修改 state 的方法都传递给子组件return (<div><Input content={ this.state.content } onContentChange={ this.handleContentChange }/><br /><br /><Input content={ this.state.content } onContentChange={ this.handleContentChange }/></div>)}
}

然后我们再来修改子组件定义：

class Input extends React.Component {constructor(props) {super(props)// 数据可以不再保存在子组件的 state 当中this.handleChange = this.handleChange.bind(this)}handleChange(e) {// 通过 props 获取父组件的 setState（修改数据的方法）// 传入一个参数（新的数据）this.props.onContentChange(e.target.value)}render() {// 通过 props 获取父组件的 state（数据）return (<input type='text' value={ this.props.content } onChange={ this.handleChange } />)}
}

通过状态提升，这样就可以实现组件之间的数据共享啦，一份完整的可运行的代码如下：

<!DOCTYPE html>
<html><head><title>Demo</title></head><body><div id="app"></div></body></html>

【 React 系列文章，请看 React学习笔记】

转载于:https://www.cnblogs.com/wsmrzx/p/11320571.html

React学习笔记(五) 状态提升相关推荐

React学习笔记(五)之父子组件传递参数
父传子通过属性,父组件向子组件传递参数. this.state.list.map((item,index)=>{<todoItem content={item} /> } 子组件通 ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
菜鸟学习笔记：Java提升篇8（线程2——线程的基本信息、线程安全、死锁、生产者消费者模式、任务调度）
菜鸟学习笔记:Java提升篇8(线程2--线程的基本信息.线程安全.死锁.生产者消费者模式.任务调度) 线程的基本信息线程同步线程安全死锁生产者消费者模式任务调度(了解) 线程的基本信息 J ...
菜鸟学习笔记：Java提升篇6（IO流2——数据类型处理流、打印流、随机流）
菜鸟学习笔记:Java IO流2--其他流字节数组输入输出流数据类型处理流基本数据类型引用类型打印流 System.in.System.out.System.err 随机流RandomAcc ...
菜鸟学习笔记：Java提升篇4（容器4——Collections工具类、其他容器）
菜鸟学习笔记:Java容器4--Collections工具类.其他容器 Collections工具类容器其他知识点队列Queue Enumeration接口 Hashtable Propertie ...
ROS学习笔记五：理解ROS topics
ROS学习笔记五:理解ROS topics 本节主要介绍ROS topics并且使用rostopic和rqt_plot命令行工具. 例子展示 roscore 首先运行roscore系列服务,这是使用R ...
哈工大操作系统学习笔记五——内核级线程实现
哈工大os学习笔记五(内核级线程实现) 文章目录哈工大os学习笔记五(内核级线程实现) 一. 中断入口.中断出口(前后两段) 1. 从int中断进入内核(中断入口第一段) 2.中断出口(最后一段) ...

React学习笔记(五) 状态提升

React学习笔记(五) 状态提升相关推荐

最新文章

热门文章