React-状态提升

通常，多个组件需要反映相同的变化数据，这时建议将共享状态提升到最近的共同父组件中去。<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>T-React</title><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script><!-- 生产环境中不建议使用 --><script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head><body><div id="root"></div>
<script type="text/babel">function BoilingVerdict(props) {if (props.celsius >= 100) {return <p>The water would boil.</p>;}return <p>The water would not boil.</p>;
}function toCelsius(fahrenheit) {return (fahrenheit - 32) * 5 / 9;
}function toFahrenheit(celsius) {return (celsius * 9 / 5) + 32;
}function tryConvert(temperature, convert) {const input = parseFloat(temperature);if (Number.isNaN(input)) {return '';}const output = convert(input);const rounded = Math.round(output * 1000) / 1000;return rounded.toString();
}const scaleNames = {c: 'Celsius',f: 'Fahrenheit'
};class TemperatureInput extends React.Component {constructor(props) {super(props);this.handleChange = this.handleChange.bind(this);}handleChange(e) {this.props.onTemperatureChange(e.target.value);}render() {const temperature = this.props.temperature;const scale = this.props.scale;return (<fieldset><legend>Enter temperature in {scaleNames[scale]}:</legend><input value={temperature}onChange={this.handleChange} /></fieldset>);}
}class Calculator extends React.Component {constructor(props) {super(props);this.handleCelsiusChange = this.handleCelsiusChange.bind(this);this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);this.state = {temperature: '', scale: 'c'};}handleCelsiusChange(temperature) {this.setState({scale: 'c', temperature});}handleFahrenheitChange(temperature) {this.setState({scale: 'f', temperature});}render() {const scale = this.state.scale;const temperature = this.state.temperature;const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;return (<div><TemperatureInputscale="c"temperature={celsius}onTemperatureChange={this.handleCelsiusChange} /><TemperatureInputscale="f"temperature={fahrenheit}onTemperatureChange={this.handleFahrenheitChange} /><BoilingVerdictcelsius={parseFloat(celsius)} /></div>);}
}ReactDOM.render(<Calculator />, //JSX格式document.getElementById("root"));</script>
</body></html>

React-状态提升相关推荐

React - 状态提升
从入门的角度来聊一下React 的状态提升. 我们先来看一下React官网是怎么介绍这一概念的: 使用 react 经常会遇到几个组件需要共用状态数据的情况.这种情况下,我们最好将这部分共享的状态提升 ...
react10_状态提升
react 状态提升一个父组件和多个子组件时,本来应存在于子组件的state移动到父组件,子组件使用props,父组件的state作为子组件的props传入子组件,可以使用子组件的功能,使子组件数据 ...
[react] react的状态提升是什么？使用场景有哪些
[react] react的状态提升是什么?使用场景有哪些 React的状态提升就是用户对子组件操作,子组件不改变自己的状态,通过自己的props把这个操作改变的数据传递给父组件,改变父组件的状态,从 ...
React 第十章状态提升
1,什么是状态提升? 在很多情况下我们在React组件中数据并不一定只是在组件内部使用,我们有可能需要将组件中的数据共享出来,在其他组件中使用.但之前我们说过React是一个单向数据流,只能将数据通 ...
React学习笔记(五) 状态提升
状态提升究竟是什么东西呢?别急,下面让我们一步一步来看看究竟要怎么使用状态提升假设我们有这样一个需求,提供两个输入框(分别属于两个组件),保证输入框里面的内容同步好,下面我们先来封装一个输入框组件 ...
web前端高级React - React从入门到进阶之组件的状态提升
系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染 ...
状态提升(精读React官方文档—10)
为什么需要状态提升? 有时候,多个组件需要共享状态,此时需要将共享状态提升到最近的共同父组件中去. 首先创建一个判断水是否沸腾的组件BoilingVerdict celsius 温度作为一个 prop ...
react进入路由前获取数据_react之传递数据的几种方式props传值、路由传值、状态提升、redux、context...
父组件: import { Route, Switch, Redirect } from 'react-router-dom' class App extends Component { render ...
uiswitchbutton 点击不改变状态_Redux 包教包会（一）：解救 React 状态危机
前端应用的状态管理日益复杂.随着大前端时代的到来,前端愈来愈注重处理逻辑,而不只是专注 UI 层面的改进,而以 React 为代表的前端框架的出现,大大简化了我们编写 UI 界面的复杂度.虽然 Rea ...
[译] ⚛ React 状态管理工具博物馆
原文地址:⚛ The React State Museum: ⚡️View the hottest state management libs for React 原文作者:Gant Laborde ...

React-状态提升

React-状态提升相关推荐

最新文章

热门文章