React 第十章状态提升

1，什么是状态提升？

在很多情况下我们在React组件中数据并不一定只是在组件内部使用，我们有可能需要将组件中的数据共享出来，在其他组件中使用。但之前我们说过React是一个单向数据流，只能将数据通过props传入子组件中，子组件中也只能将数据通过state在组件内部流动，或者再通过props传入到该组件的子组件中，类似于瀑布一样，数据向下流动，中间可能会产生数据但仍只能向下流。而此时我们就需要将组件中的数据共享到兄弟组件或者父组件该怎么办，所以本章要讲的是状态提升，通过本章节我们将会实现。

举例：现在我们有一个需求，实现一个温度计，输入温度后，根据温度判断是否水进行沸腾。。现在代码如下：

import React from 'react';
import ReactDOM from 'react-dom';class ShowPanel extends React.Component{constructor(props){super(props);}render(){return (<div>水：{this.props.ht >= 100 ? "沸腾了" : "没有沸腾"}</div>);}
}class Hinput extends React.Component{constructor(props){super(props);this.state={ht:0};}onChange = (e) =>{this.setState({ht:e.target.value});}render(){return (<div>华氏温度：<input type="text" value={this.state.ht} onChange={this.onChange.bind(this)}/> <br/><ShowPanel ht={this.state.ht}/></div>);}
}//使用大括号中进行遍历
ReactDOM.render(<Hinput />,document.getElementById('root'));

上面代码为一个输入框以及内嵌一个显示面板组件。现在我们需求是希望有一个计算器有两个输入框分别为华氏度和摄氏度都可以进行输入，并且两个输入框中数据同步显示换算，现我们分析后觉得需要有两个输入组件和一个显示面板以及组装成的计算器组件，页面直接引用计算器组件。代码如下：

import React from 'react';
import ReactDOM from 'react-dom';class ShowPanel extends React.Component{constructor(props){super(props);}render(){var degrees = this.props.degrees;return (<div>水：{degrees >= 100 ? "沸腾了" : "没有沸腾"}</div>);}
}class Cinput extends React.Component{constructor(props){super(props);}onChange = (e) =>{this.props.onChange(e.target.value);}render(){return (<div>摄氏温度：<input type="text" value={this.props.cdegrees}   onChange={this.onChange.bind(this)}/> <br/></div>);}
}
class Finput extends React.Component{constructor(props){super(props);}onChange = (e) =>{this.props.onChange(e.target.value);}render(){return (<div>华氏温度：<input type="text" value={this.props.fdegrees}  onChange={this.onChange.bind(this)}/> <br/></div>);}
}
//温度计
class TemperatureComputer extends React.Component{constructor(props){super(props);this.state={cdegrees:0,fdegrees:0,type:'c'};}toCelsius = (fahrenheit) => {return (fahrenheit - 32) * 5 / 9;}toFahrenheit = (celsius) => {return (celsius * 9 / 5) + 32;}onCinputChange = (cval)=>{var fval = this.toFahrenheit(cval);this.setState(()=>{return {cdegrees:cval,fdegrees:fval,type:'c'};});}onFinputChange = (fval)=>{var cval = this.toCelsius(fval);this.setState(()=>{return {fdegrees:fval,cdegrees:cval,type:'f'};});}render(){return (<div><Cinput cdegrees={this.state.cdegrees} onChange={this.onCinputChange.bind(this)}/><Finput fdegrees={this.state.fdegrees} onChange={this.onFinputChange.bind(this)}/><ShowPanel degrees={this.state.cdegrees} /></div>);}
}ReactDOM.render(<TemperatureComputer />,document.getElementById('root'));

总结：通过上面代码我们可以看出比较关键的地方就是我们在输入组件上添加了一个onChange事件，并且在输入组件内部我们在组件内输入发生变化时，通过组件内部监听函数，调用了该组件属性中的onChange事件，故而触发了该组件对外暴露的onChange属性函数（组件的onChange 命名不一定必须要用“onChange” 这里命名只是为了养成一个好的习惯而已，因为大部分组件的内容改变函数均命名为onChange），然后在组件的onChange函数中调用父组件中的监听函数，从而操纵了父组件state 进而触发改变了该组件的兄弟节点组件。从而达到了组件内部数据向上的“逆向传递”。也称作为状态提升。

React 第十章状态提升相关推荐

web前端高级React - React从入门到进阶之组件的状态提升
系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染 ...
React - 状态提升
从入门的角度来聊一下React 的状态提升. 我们先来看一下React官网是怎么介绍这一概念的: 使用 react 经常会遇到几个组件需要共用状态数据的情况.这种情况下,我们最好将这部分共享的状态提升 ...
[react] react的状态提升是什么？使用场景有哪些
[react] react的状态提升是什么?使用场景有哪些 React的状态提升就是用户对子组件操作,子组件不改变自己的状态,通过自己的props把这个操作改变的数据传递给父组件,改变父组件的状态,从 ...
React学习笔记(五) 状态提升
状态提升究竟是什么东西呢?别急,下面让我们一步一步来看看究竟要怎么使用状态提升假设我们有这样一个需求,提供两个输入框(分别属于两个组件),保证输入框里面的内容同步好,下面我们先来封装一个输入框组件 ...
状态提升(精读React官方文档—10)
为什么需要状态提升? 有时候,多个组件需要共享状态,此时需要将共享状态提升到最近的共同父组件中去. 首先创建一个判断水是否沸腾的组件BoilingVerdict celsius 温度作为一个 prop ...
react进入路由前获取数据_react之传递数据的几种方式props传值、路由传值、状态提升、redux、context...
父组件: import { Route, Switch, Redirect } from 'react-router-dom' class App extends Component { render ...
11 父子组件数据关系与状态提升
含义状态提升:两个组件(无父子关系)共享一个数据并且同步数据变化类组件调用(实例化)的时候,组件内部的状态是唯一且独立的组件嵌套与调用,和是类组件(render)还是函数组件(直接return) ...
React---基础2（List/Key、表单(ref、event)、状态提升(共享组件)、组件占位符）
七.列表和键列表(List), 键(Key) 回顾一下在javascript中如何转换列表:在数组中使用map()函数对numbers数组中的每个元素依次执操作 const number ...
react中数据状态管理的四种方案
我们为什么需要状态管理? (1) 一个是为了解决相邻组件的通信问题. 虽然可以通过「状态提升」解决,但有两个问题: 每次子组件更新,都会触发负责下发状态的父组件的整体更新(使用 Context 也有这 ...

React 第十章状态提升

React 第十章状态提升相关推荐

最新文章

热门文章

React 第十章 状态提升

React 第十章 状态提升相关推荐

最新文章

热门文章

React 第十章状态提升

React 第十章状态提升相关推荐