通常，多个组件需要反映相同的变化数据，这时建议将共享状态提升到最近的共同父组件中去。

<!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>

        <TemperatureInput

          scale="c"

          temperature={celsius}

          onTemperatureChange={this.handleCelsiusChange} />

        <TemperatureInput

          scale="f"

          temperature={fahrenheit}

          onTemperatureChange={this.handleFahrenheitChange} />

        <BoilingVerdict

          celsius={parseFloat(celsius)} />

      </div>

    );

  }

}

    ReactDOM.render(

        <Calculator />, //JSX格式

        document.getElementById("root")

    );

</script>

</body>

</html>

React-状态提升的更多相关文章

  1. react状态提升问题：：：：

    父组件传值给子组件,只需要在组件上写上naverightstates={this.state.naverightstates},然后在子组件里面引用this.props.naverightstates ...

  2. react之传递数据的几种方式props传值、路由传值、状态提升、redux、context

    react之传递数据的几种方式 1.父子传值 父传值:<子的标签 value={'aaa'} index={'bbb'}></子的标签> 子接值:<li key={thi ...

  3. React.js 小书 Lesson17 - 前端应用状态管理 —— 状态提升

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson17 转载请注明出处,保留原文链接和作者信息. 上一个评论功能的案例中,可能会有些同学会对一个 ...

  4. react入门（六）：状态提升&context上下文小白速懂

    一.状态提升 使用 react 经常会遇到几个组件需要共用状态数据的情况.这种情况下,我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理. 原理:父组件基于属性把自己的一个fn函数传递给子组 ...

  5. 借鉴redux，实现一个react状态管理方案

    react状态管理方案有很多,其中最简单的最常用的是redux. redux实现 redux做状态管理,是利用reducer和action实现的state的更新. 如果想要用redux,需要几个步骤 ...

  6. React状态管理相关

    关于React状态管理的一些想法 我最开始使用React的时候,那个时候版本还比较低(16版本以前),所以状态管理都是靠React自身API去进行管理,但当时最大的问题就是跨组件通信以及状态同步和状态 ...

  7. React报错之无法在未挂载的组件上执行React状态更新

    正文从这开始~ 总览 为了解决"Warning: Can't perform a React state update on an unmounted component" ,可以 ...

  8. react状态

    组件的生命周期分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM React 为每个状态都提供了两种处理函数,will 函 ...

  9. 纯粹极简的react状态管理组件unstated

    简介 unstated是一个极简的状态管理组件 看它的简介:State so simple, it goes without saying 对比 对比redux: 更加灵活(相对的缺点是缺少规则,需要 ...

  10. react状态管理器之mobx

    react有几种状态管理器,今天先来整理一下mobx状态管理器,首先了解一下什么是mobx 1.mobx成员: observable action 可以干嘛: MobX 的理念是通过观察者模式对数据做 ...

随机推荐

  1. Fastjson1.2.24RCE漏洞复现

    Fastjson1.2.24RCE漏洞复现 环境搭建 这里用的Vulhub靶场 cd /vulhub/fastjson/1.2.24-rce docker-compose up -d 报错 ERROR ...

  2. mongoDB导出-导入数据

    --导出数据集 C:\MongoDB\db\bin>mongoexport -d ttx-xwms-test -c things -o d:\mongo_data\things.txt C:\M ...

  3. Java 树结构的基础部分(二）

    1 顺序存储二叉树 1.1 顺序存储二叉树的概念  基本说明 从数据存储来看,数组存储方式和树的存储方式可以相互转换,即数组可以转换成树,树也可以转换成数组, 看下面的示意图.  要求: 1) 右 ...

  4. 2019 南京网络赛 B super_log 【递归欧拉降幂】

    一.题目 super_log 二.分析 公式很好推出来,就是$$a^{a^{a^{a^{...}}}}$$一共是$b$个$a$. 对于上式,由于指数太大,需要降幂,这里需要用到扩展欧拉定理: 用这个定 ...

  5. Srping源码之BeanFactory.getBean

    本文是针对Srping的BeanFactory.getBean来进行源码解析,如果您是第一次看请先看一下XMLBeanFactory解析:https://www.cnblogs.com/technol ...

  6. 在ASP.NET Core中用HttpClient（六）——ASP.NET Core中使用HttpClientFactory

    ​到目前为止,我们一直直接使用HttpClient.在每个服务中,我们都创建了一个HttpClient实例和所有必需的配置.这会导致了重复代码.在这篇文章中,我们将学习如何通过使用HttpClient ...

  7. CMS前世今生

    CMS一直是面试中的常考点,今天我们用通俗易懂的语言简单介绍下. 垃圾回收器为什么要分区分代? 如上图:JVM虚拟机将堆内存区域分代了,先生代是朝生夕死的区域,老年代是老不死的区域,不同的年代对象有不 ...

  8. 学习笔记-vue 打包去#和页面空白问题

    文件资源路径是对的,但是页面空白.百度了很久找了一篇文章解决了. 1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html ...

  9. 深度学习---1cycle策略：实践中的学习率设定应该是先增再降

    深度学习---1cycle策略:实践中的学习率设定应该是先增再降 本文转载自机器之心Pro,以作为该段时间的学习记录 深度模型中的学习率及其相关参数是最重要也是最难控制的超参数,本文将介绍 Lesli ...

  10. 【算法学习笔记】Meissel-Lehmer 算法 （亚线性时间找出素数个数）

    「Meissel-Lehmer 算法」是一种能在亚线性时间复杂度内求出 \(1\sim n\) 内质数个数的一种算法. 在看素数相关论文时发现了这个算法,论文链接:Here. 算法的细节来自 OI w ...