React学习…
看了下React的状态提升的理念,试着写了一下,同时也顺便复习了一下之前就不太熟的面向对象的编程思维。
大致上把React的核心概念看了,有点感觉了,是个非常好用的框架。
![](https://picture-1305384466.cos.ap-nanjing.myqcloud.com/210927react rest2.gif)
index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 import React from "react" ;import ReactDOM from "react-dom" ;import "./index.css" ;const scaleNames = { c : "Celsius" , f : "Fahrenheit" , }; 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(); } function BoilingVerdict (props ) { if (props.celsius >= 100 ) { return <p > The water would boil.</p > ; } return <p > The water would not boil.</p > ; } 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( <React.StrictMode > <Calculator /> </React.StrictMode > , document .getElementById("root" ) );