React状态提升案例介绍
1.介绍
所谓 状态提升 就是将各个子组件的 公共state 提升到它们的父组件进行统一存储、处理（这就是所谓的”单一数据源“），负责setState的函数传到下边的子级组件，然后再将父组件处理后的数据或函数props到各子组件中。
那么如果子组件 要 修改父组件的state该怎么办呢？我们的做法就是 将父组件中负责setState的函数，以props的形式传给子组件，然后子组件在需要改变state时调用即可。
实现方式
实现方式是 利用最近的共同的父级组件中，用props的方式传过去到两个子组件，props中传的是一个setState的方法，通过子组件触发props传过去的方法，进而调用父级组件的setState的方法，改变了父级组件的state，调用父级组件的render方法，进而同时改变了两个子级组件的render。
这是 两个有关连的同级组件的传值，因为react的单项数据流，所以不在两个组件中进行传值，而是提升到 最近的共同的父级组件中，改变父级的state,进而影响了两个子级组件的render。
官网介绍
通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父组件中去。
2.案例
先写一个温度输入组件：
class TemperatureInput extends React.Component {
state = {
temperature: ''
};
handleChange = (e) => {
this.setState({
temperature : e.target.value
})
};
render() {
return (
<fieldset>
<legend>输入{scaleNames[this.props.scale]}:</legend>
<input type="number" value={this.state.temperature} onChange={this.handleChange}
</fieldset>
)
}
}
这个组件就是一个普通的受控组件，有state和props以及处理函数。
我们在写另一个组件：
class Calculator extends React.Component {
render () {
return (
<div>
<TemperatureInput scale='c'/>
<TemperatureInput scale='f'/>
</div>
)
}
}
这个组件现在没有什么存在的价值，我们仅仅是给两个温度输入组件提供一个父组件，以便我们进行后续的状态提升。
现在我们看看网页的样子：
我们可以输入摄氏度和华氏度，但是我们现在想要让这两个温度保持一致，就是我们如果输入摄氏度，那么下面的华氏度可以自动算出来，如果我们输入华氏度，那么摄氏度就可以自动算出来。
那么我们按照现在这种结构的话，是非常难以实现的，因为我们知道这两个组件之间没有任何关系，它们之间是不知道对方的存在，所以我们需要把它们的状态进行提升，提升到它们的父组件当中。
那我们看看如何做修改，首先把子组件（温度输入组件）的状态（state）全部删除，看看是什么样子:
class TemperatureInput extends React.Component {
handleChange = (e) => {
};
render() {
return (
<fieldset>
<legend>输入{scaleNames[this.props.scale]}:</legend>
<input type="number" value={this.props.temperature} onChange={this.handleChange}/>
</fieldset>
)
}
}
可以看到所有与state有关的东西全部删掉了，然后input的value也变成了props，通过父组件传入。那么现在这个温度输入组件其实就是一个受控组件了，仔细回忆一下我们之前讲的受控组件，看看是不是这样意思？
我们通常会在受控组件发生改变的时候传入一个onChange函数来改变受控组件的状态，那么我们这里也是一样，我们通过给 温度输入组件 传入某个函数来让 温度输入组件 中的input发生变化的时候调用，当然这个函数我们可以随意命名，假如我们这里叫做onTemperatureChange函数，那么我们继续修改子组件：
class TemperatureInput extends React.Component {
handleChange = (e) => {
this.props.onTemperatureChange(e.target.value);
};
render() {
return (
<fieldset>
<legend>输入{scaleNames[this.props.scale]}:</legend>
<input type="number" value={this.props.temperature} onChange={this.handleChange}/>
</fieldset>
)
}
}
好了，我们的子组件差不多就是这样了，当然我们可以省略那个handleChange函数，因为可以看到这个函数就是调用了一下那个props里的函数，所以我们完全把input的onChange这么写 <input type="number" value={this.props.temperature} onChange={this.props.onTemperatureChange}/>这么写的话注意onTemperatrueChange函数的参数是那个事件，而不是我这里写的e.target.value。
再看看我们的父组件如何修改，我们首先补上state，以及子组件对应的onChange处理方法，以及子组件的值。写好之后大概是这个样子：
class Calculator extends React.Component {
state = {
celsius: '',
fahrenheit: ''
};
onCelsiusChange = (value) => {
this.setState({
celsius: value,
fahrenheit: tryConvert(value, toFahrenheit)
});
};
onFahrenheitChange = (value) => {
this.setState({
celsius: tryConvert(value, toCelsius),
fahrenheit: value
});
};
render() {
return (
<div>
<TemperatureInput scale='c' temperature={this.state.celsius}
onTemperatureChange={this.onCelsiusChange}/>
<TemperatureInput scale='f' temperature={this.state.fahrenheit}
onTemperatureChange={this.onFahrenheitChange}/>
</div>
)
}
}
这里我们省略的摄氏度与华氏度的转换函数，比较简单，大家自行搜索方法。
到此这篇关于React状态提升案例介绍的文章就介绍到这了,更多相关React状态提升内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了React中前端路由的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
React中的useState和setState的执行机制详解
这篇文章主要介绍了React中的useState和setState的执行机制,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了使用React组件编写温度显示器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了React如何接收excel文件下载导出功能封装，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Axios是一个npm软件包,允许应用程序将HTTP请求发送到Web API,下面这篇文章主要给大家介绍了关于React项目中axios的封装与API接口的管理的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要为大家介绍了create-react-app项目配置全解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
React获取Java后台文件流并下载Excel文件流程解析
这篇文章主要介绍了React获取Java后台文件流下载Excel文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
React找不到模块“./index.module.scss”或其相应的类型声明及解决方法
这篇文章主要介绍了React找不到模块“./index.module.scss”或其相应的类型声明及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了React精髓！一篇全概括小结(急速)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了React如何通过@craco/craco代理接口问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论