useContext的使用

場景：在一個動態生成的多個組件裏面，可能一個組件依賴於另外一個組件的值而變化

咱們首先想到的是redux，這一個能夠保存供多個組件使用的解決方案

方法：建立咱們本身的reducer，使用useContext提供使用

const { PageData, activeComponent } = useContext(PageContext);

在具體的場景裏面，個人PageData存儲的頁面信息，activeComponent當前選中的頁面組件的索引

不出所料，咱們果真能夠正確使用，

bug：可是，在拉入下一個組件的時候，報錯以下

Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks

百度以後https://stackoverflow.com/questions/53472795/uncaught-error-rendered-fewer-hooks-than-expected-this-may-be-caused-by-an-acc發現元問題出現的緣由：

咱們的組件動態生成是存在判斷條件的，也就是經過判斷組件的type屬性選擇對應的組件

switch (type) {
        case 'Array':
            EditorComp = () => {
                return <React.Fragment>{UseArrInput(props, value, handleChange)}</React.Fragment>;
            };
            break;
        case 'Object':
            EditorComp = () => {
                return <React.Fragment>{UseObjectInput(props, value, handleChange)}</React.Fragment>;
            };
            break;
        default:
            EditorComp = () => {
                return <React.Fragment>{Editor(props, value, handleChange)}</React.Fragment>;
            };
            break;
    }

而react的鉤子官方要求以下

不要在循環，條件或嵌套函數中調用Hook。相反，始終在React函數的頂層使用Hooks。經過遵循此規則，您能夠確保每次組件呈現時都以相同的順序調用Hook。這就是容許React在多個useState和useEffect調用之間正確保留Hook狀態的緣由。

最終解決方案：選擇在沒有判斷條件的頂層使用useContext，將獲取的值，做爲參數傳給組件使用！