這是我花了一些時(shí)間與自己斗爭(zhēng)的問(wèn)題。有多種方法可以將子狀態(tài)保持在更高級(jí)別；但是，我發(fā)現(xiàn)在您的特定情況下，通常最好使用 Redux。
需要明確的是，我通常不惜一切代價(jià)避免 Redux（支持 React 的上下文），但 Redux 讓您能夠訂閱子組件中的特定狀態(tài)。當(dāng)您只需要更新一個(gè)子組件時(shí)，偵聽(tīng)子組件中的一個(gè)狀態(tài)將阻止您的父組件和兄弟組件更新。這在一次處理多個(gè)表單時(shí)效率更高。
例如，以下組件將僅偵聽(tīng)影響其自身狀態(tài)的狀態(tài)更新。這些更新將繞過(guò)表單父組件和兄弟組件：
import React from 'react';
import { connect } from 'react-redux';
import * as actions from 'redux/actions';
// Custom component
import { InputField } from 'shared';
const FormOne = ({ me, actions }) => (
<form>
<InputField
inputId="f1f1"
label="field one"
value={me.fieldOne}
onChange={(e) => actions.setFormOneFieldOne(e.target.value)}
/>
<InputField
inputId="f1f2"
label="field two"
value={me.fieldTwo}
onChange={(e) => actions.setFormOneFieldTwo(e.target.value)}
/>
<InputField
inputId="f1f3"
label="field three"
value={me.fieldThree}
onChange={(e) => actions.setFormOneFieldThree(e.target.value)}
/>
</form>
);
export default connect(state => ({ me: state.formOne }), actions)(FormOne);
在上面的例子FormOne中只是監(jiān)聽(tīng)自己的狀態(tài)更新；然而，使用上下文而不是 Redux 的類似邏輯將導(dǎo)致上下文提供者包裝的整個(gè)組件樹(shù)更新（包括父組件和兄弟組件）：
import React, { useContext } from 'react';
// Custom component
import { InputField } from 'shared';
// Custom context - below component must be wrapped with the provider
import { FormContext } from 'context';
const FormTwo = () => {
const context = useContext(FormContext);
return(
<form>
<InputField
inputId="f2f1"
label="field one"
value={context.state.formTwo.fieldOne}
onChange={(e) => context.setFormTwoFieldOne(e.target.value)}
/>
<InputField
inputId="f2f2"
label="field two"
value={context.state.formTwo.fieldTwo}
onChange={(e) => context.setFormTwoFieldTwo(e.target.value)}
/>
<InputField
inputId="f2f3"
label="field three"
value={context.state.formTwo.fieldThree}
onChange={(e) => context.setFormTwoFieldThree(e.target.value)}
/>
</form>
);
};
export default FormTwo;
可以對(duì)上述兩個(gè)組件進(jìn)行一些改進(jìn)，但它們旨在作為如何將子組件連接到提升狀態(tài)的示例。也可以使用 連接到單個(gè)父組件props，但這是效率最低的選項(xiàng)，并且會(huì)使您的體系結(jié)構(gòu)混亂。
關(guān)鍵要點(diǎn)：將 Redux 用于您的用例。如果正確實(shí)施，這是最有效的選擇。
