通常拴竹，幾個組件需要根據(jù)同一個數(shù)據(jù)變化做出響應(yīng)掉奄。我們建議將這個共享的狀態(tài)提升到他們最近的一個共用祖先晦款。讓我們看看實際該怎么做炎功。
在這一節(jié)，我們將創(chuàng)建一個溫度計算器缓溅，用來計算一給定溫度能否讓水沸騰蛇损。
我們從名為BoilingVerdict的組件開始。它接受celsius溫度作為prop坛怪，然后打印出是否足夠使水沸騰：
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>;
}
接下來淤齐，我們創(chuàng)建一個Calculator組件。它渲染一個供你輸入溫度的<input>袜匿，并將它的值存在this.state.temperature中更啄。
除此之外，他還為當(dāng)前的輸入渲染一個BoilingVerdict居灯。
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temperature: ''};
}
handleChange(e) {
this.setState({temperature: e.target.value});
}
render() {
const temperature = this.state.temperature;
return (
<fieldset>
<legend>Enter temperature in Celsius:</legend>
<input
value={temperature}
onChange={this.handleChange} />
<BoilingVerdict
celsius={parseFloat(temperature)} />
</fieldset>
);
}
}
添加第二個輸入
我們有個新的需求祭务，除了一個攝氏度輸入内狗，我們還要提供一個華氏輸入，并且他們保持同步义锥。
我們先從Calculator中提取TemperatureInput組件柳沙。然后為其添加一個新的scaleprop，它的值值為"c"或"f"：
const scaleNames = {
c: 'Celsius',
f: 'Fahrenheit'
};
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temperature: ''};
}
handleChange(e) {
this.setState({temperature: e.target.value});
}
render() {
const temperature = this.state.temperature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}:</legend>
<input value={temperature}
onChange={this.handleChange} />
</fieldset>
);
}
}
現(xiàn)在我們可以改變Calculator來渲染兩個獨立的溫度輸入：
class Calculator extends React.Component {
render() {
return (
<div>
<TemperatureInput scale="c" />
<TemperatureInput scale="f" />
</div>
);
}
}
在CodePen上試一試
現(xiàn)在我們有兩個輸入了缨该，但是當(dāng)你在其中一個里輸入溫度偎行，另一個不會去更新。這就不滿足我們的需求了贰拿，我們想讓他們同步蛤袒。
我們也沒在Calculator中顯示BoilingVerdict。Calculator不知道當(dāng)前的溫度膨更，因為溫度被隱藏在TemperatureInput中妙真。
編寫轉(zhuǎn)換函數(shù)
首先我們寫兩個函數(shù)來互相轉(zhuǎn)換攝氏度和華氏溫度。
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5 / 9;
}
function toFahrenheit(celsius) {
return (celsius * 9 / 5) + 32;
}
這兩個函數(shù)轉(zhuǎn)換數(shù)字荚守。接下來我們寫另一個函數(shù)珍德，接受一個temperature字符串和一個轉(zhuǎn)換函數(shù)作為參數(shù)，返回一個字符串矗漾。我們將用他來根據(jù)另一個input來計算這個input的值锈候。
一個無效temperature會使它返回一個空字符串，另外它會保證輸出結(jié)果四舍五入到小數(shù)點后三位：
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();
}
比如敞贡，tryConvert('abc', toCelsius)返回空字符串泵琳，tryConvert('10.22', toFahrenheit)返回'50.396'。
提升狀態(tài)
目前誊役，兩個TemperatureInput組件都單獨地在本地狀態(tài)中保存自己的值：
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temperature: ''};
}
handleChange(e) {
this.setState({temperature: e.target.value});
}
render() {
const temperature = this.state.temperature;
然而获列，我們希望這兩個input可以彼此同步。當(dāng)我們更新攝氏度input蛔垢，華氏度input也會相應(yīng)的轉(zhuǎn)換溫度击孩，反之亦然。
在React中鹏漆，想要共享狀態(tài)巩梢，就需要找到共享狀態(tài)組件的一個最近共有祖先，然后通過將該狀態(tài)移動到這個共有祖先上來完成共享甫男。這稱為“提升狀態(tài)”且改。我們先移除TemperatureInput的本地狀態(tài)，取而代之的是將它移到Calculator中板驳。
如果Calculator擁有共享狀態(tài)又跛，對于兩個input中的溫度來說他就成為了“真相的來源”。他就可以指示兩個input具有相同的值若治。由于兩個TemperatureInput組件的props都來自同一個父組件Calculator慨蓝，兩個input將始終保持同步感混。
讓我們逐步分析這是如何工作的。
首先礼烈，在TemperatureInput組件中弧满，我們使用this.props.temperature將this.state.temperature替換掉。現(xiàn)在此熬，讓我們假設(shè)this.props.temperature已經(jīng)存在庭呜，之后我們會從Calculator中傳入該值：
render() {
// Before: const temperature = this.state.temperature;
const temperature = this.props.temperature;
我們知道props是只讀的。之前temperature在本地狀態(tài)中犀忱，TemperatureInput只能調(diào)用this.setState()來改變它募谎。而現(xiàn)在，temperature作為prop從父組件獲取阴汇，TemperatureInput不能再控制它了数冬。
在React中，一般通過將組件變?yōu)椤笆芸亍辈笫瑏斫鉀Q這個拐纱。就像DOM<input>接受一個value和一個onChangeprop，所以自定義的TemperatureInput可以從它的父組件Calculator中獲取temperature和onTemperatureChangeprops哥倔。
現(xiàn)在秸架，當(dāng)TemperatureInput想要更新它的溫度值，調(diào)用this.props.onTemperatureChange就好了:
handleChange(e) {
// Before: this.setState({temperature: e.target.value});
this.props.onTemperatureChange(e.target.value);
注意咆蒿，自定義組件中的prop名字：temperature和onTemperatureChange并沒什么特別的意思咕宿。我們可以隨意命名，比如給它們更通用的名字value和onChange蜡秽。
父組件Calculator提供proponTemperatureChange的同時也提供temperature。他通過修改自己的本地狀態(tài)來處理更改缆镣，從而將兩個input重新渲染為新的值芽突。我們馬上就來看看新的Calculator實現(xiàn)。
在深入Calculator的變化之前董瞻，我們來重新看遍TemperatureInput組件中做過什么變動寞蚌。我們將他的本地狀態(tài)移除，將從this.state.temperature讀取钠糊，改為從this.props.temperature讀取挟秤。當(dāng)我們想做出變化時，現(xiàn)在我們調(diào)用Calculator提供的this.props.onTemperatureChange()抄伍，來代替之前的this.setState()艘刚。
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>
);
}
}
現(xiàn)在讓我們回到Calculator組件。
我們將當(dāng)前輸入的temperature和scale存到他的本地狀態(tài)截珍。這就是我們從input中“提升”的狀態(tài)攀甚，該狀態(tài)將作為“真相的來源”提供給兩個TemperatureInput箩朴。這是我們渲染兩個input，所需數(shù)據(jù)的最少表示秋度。
假如炸庞，我們在攝氏度輸入框中輸入37，Calculator組件的狀態(tài)如下：
{
temperature: '37',
scale: 'c'
}
如果我們將華氏字段編輯為212荚斯，Calculator的狀態(tài)將變?yōu)椋?/p>
{
temperature: '212',
scale: 'f'
}
我們可以存儲兩個輸入的值埠居，但實際上是不必的。存儲最后一次變化的值和單位即可事期。然后我們可以根據(jù)當(dāng)前的溫度和單位來換算出另一個值滥壕。
因為兩個input的值從同一個狀態(tài)計算而來，所以他們始終保持同步：
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>
);
}
}
在CodePen上試一試
現(xiàn)在刑赶，不論你編輯哪一個input捏浊，Calculator中的this.state.temperature和this.state.scale都會得到更新。從任何一個input獲取的用戶輸入都會被保存撞叨，另一個input的值會根據(jù)它重新計算金踪。
讓我們重新看下當(dāng)你編輯一個input時發(fā)生了什么：
- React調(diào)用DOM
<input>上指定為onChange的函數(shù)。在我們的例子中這個函數(shù)是TemperatureInput組件的handleChange方法牵敷。 -
TemperatureInput中的handleChange方法胡岔，使用新的需求值調(diào)用this.props.onTemperatureChange()。他的props枷餐，包括onTemperatureChange靶瘸，都是由他的父組件Calculator提供。 - 在渲染之前毛肋，
Calculator已經(jīng)將自己的handleCelsiusChange方法賦值給攝氏度TemperatureInput的onTemperatureChange怨咪，還將自己的handleFaherenheitChange方法賦值給華氏度TemperatureInput的onTemperatureChange。所以润匙，Calculator的這個兩個方法會根據(jù)我們編輯的input诗眨，而得到調(diào)用。 - 在這些方法中孕讳，
Calculator組件通過使用新的輸入值和在編輯中input的單位來調(diào)用this.setState()匠楚，使得React重新渲染自己。 - React通過調(diào)用
Calculator組件的render方法來獲取UI的外觀厂财。兩個input的值根據(jù)當(dāng)前的溫度和單位重新計算芋簿。溫度的換算在這個時候進(jìn)行。 - React根據(jù)
Calculator提供的新props來分別調(diào)用TemperatureInput的render方法璃饱。由此得知他們UI的外觀与斤。 - React DOM更新DOM來匹配所需的input值。我們編輯的input接受當(dāng)前的值，另一個input更新為轉(zhuǎn)換后的問題幽告。
每次更新都會重復(fù)上面的步驟梅鹦，從而使所有input保持同步。
經(jīng)驗教訓(xùn)
在React應(yīng)用中冗锁，所有變化的數(shù)據(jù)都應(yīng)該是單獨的“真相來源”齐唆。通常，狀態(tài)第一個被添加到組件中（組件需要用這些狀態(tài)來進(jìn)行渲染）冻河。如果其他組件也需要它箍邮，你可以將狀態(tài)提升到這些組件共用的最近祖先。你應(yīng)該依賴自上而下的數(shù)據(jù)流叨叙，而不是同步多個組件的狀態(tài)锭弊。
比起雙向綁定的方法，提升狀態(tài)需要寫更多的“樣板”代碼擂错，但好處就是味滞，它可以更輕松的找到和隔離bug。因為任何狀態(tài)都是存在于組件中钮呀，并且只有組件可以修改它剑鞍，由此bugs存在的區(qū)域大大被減少。另外爽醋，你可以實現(xiàn)任意邏輯來拒絕或轉(zhuǎn)換用戶的輸入蚁署。
如果某個值可以通過其他props或狀態(tài)獲得，那他就不該把他放在狀態(tài)中蚂四。比如光戈，我們僅僅存儲上一次編輯的溫度和單位，而不是將celsiusValue和fahrenheitValue都存下來遂赠。因為在render()方法中久妆，一個input的值始終可以通過另一個計算得來。這樣跷睦，我們對另一個字段用或不用四舍五入镇饺，都不會在用戶的輸入中丟失精度。
當(dāng)你發(fā)現(xiàn)UI上有錯誤發(fā)生送讲，你可以使用React開發(fā)者工具來檢查props，然后沿著樹結(jié)構(gòu)向上惋啃，知道你找到負(fù)責(zé)更新狀態(tài)的組件哼鬓。這使你追溯到bug的來源：
