Question

我开始在带有ContextAPI的React中使用钩子。

这是我的第一个带有钩子的上下文示例：

import React, { createContext, useState } from 'react';

export const DepartureDateContext = createContext();

export const DepartureDateProvider = (props) => {
    const [departureDate, setDepartureDate] = useState(new Date());

    return (
        <DepartureDateContext.Provider
            value={[departureDate, setDepartureDate]}
        >
            {props.children}
        </DepartureDateContext.Provider>
    )
}

这是第二个例子：

import React, { createContext, useState } from 'react';

export const OriginContext = createContext();

export const OriginProvider = (props) => {
    const [originText, originSearch] = useState('');

    return (
        <OriginContext.Provider
            value={[originText, originSearch]}
        >
            {props.children}
        </OriginContext.Provider>
    )
}

当我在这些上下文中使用提供程序时，就会出现问题。提供者可以堆叠，并且看起来很难看。像这样：

<OriginProvider>
  <DepartureDateProvider>
    <DestinationProvider>
      <DestinationDateProvider>
        <FlightSearch/>
      </DestinationDateProvider>
    </DestinationProvider>
  </DepartureDateProvider>
</OriginProvider>

由于有可能我会有更多的上下文，所以这只会变得比这更加丑陋。

我的问题是，有什么办法可以使它更漂亮。例如将所有这些上下文合并为一个上下文？如果是这样，我该如何传递所有状态及其处理程序，但要保持状态整洁和可读性？

谢谢。

Answer 1

我找到了一个解决方案，但是我不确定这是否适合我所拥有的用例。它将清除堆叠的上下文，但是我不知道这是否将来会提供更多的复杂性（取决于合并后的上下文中有多少个状态）。

想法是将所有状态及其处理程序转移到单个上下文中，并将它们公开在一起。

这是我在说什么的虚拟例子：

这是具有多个状态的上下文：

import React, { createContext, useState } from 'react';

export const ContextSample = createContext();

export const ContextSampleProvider = (props) => {
    const [state1, handler1] = useState('');
    const [state2, handler2] = useState('');

    return(
        <ContextSample.Provider
            value={[
                [state1, handler1],
                [state2, handler2]
            ]}
        >
            {props.children}
        </ContextSample.Provider>
    );
}

这是App.js：

import React from 'react';
import { ContextSampleProvider } from './components/Contexts/ContextSample';
import Main from './components/Main/Main';

function App() {
  return (
    <ContextSampleProvider>
      <Main/>
    </ContextSampleProvider>
  );
}

export default App;

这是主要组件：

import React, { useContext, useEffect } from 'react';
import { ContextSample } from '../Contexts/ContextSample';

const Main = () => {
    const [
        [state1, handler1],
        [state2, handler2]
    ] = useContext(ContextSample);

    useEffect(() => {
        handler1('Value1');
        handler2('Value2');
    })

    return(
        <div>
            <div>
                {state1}
            </div>
            <div>
                {state2}
            </div>
        </div>
    );
}

export default Main;

如您所见，我删除了嵌套上下文，它看起来更好。

但是我担心的是这一部分：

const [
        [state1, handler1],
        [state2, handler2]
    ] = useContext(ContextSample);

它可能具有更多的状态和处理程序，这些状态和处理程序可能变得不易阅读。但是已经有了很大的进步，我不需要一开始就嵌套所有上下文。

您知道这是否是一种好方法，是否有更好的解决方案？

编辑：我已经在我的博客上发表了一篇关于此问题的文章。对于感兴趣的人，请转到 useContext 部分下的https://blog.ryukote.io/2019/08/15/react-hooks/。

更干净的React上下文

1 个答案: