這是我花了一些時間與自己斗爭的問題。有多種方法可以將子狀態(tài)保持在更高級別；但是，我發(fā)現(xiàn)在您的特定情況下，通常最好使用 Redux。
需要明確的是，我通常不惜一切代價避免 Redux（支持 React 的上下文），但 Redux 讓您能夠訂閱子組件中的特定狀態(tài)。當您只需要更新一個子組件時，偵聽子組件中的一個狀態(tài)將阻止您的父組件和兄弟組件更新。這在一次處理多個表單時效率更高。
例如，以下組件將僅偵聽影響其自身狀態(tài)的狀態(tài)更新。這些更新將繞過表單父組件和兄弟組件：
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ài)更新；然而，使用上下文而不是 Redux 的類似邏輯將導致上下文提供者包裝的整個組件樹更新（包括父組件和兄弟組件）：
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;
可以對上述兩個組件進行一些改進，但它們旨在作為如何將子組件連接到提升狀態(tài)的示例。也可以使用 連接到單個父組件props，但這是效率最低的選項，并且會使您的體系結構混亂。
關鍵要點：將 Redux 用于您的用例。如果正確實施，這是最有效的選擇。
