reactjs - 更干净的 React 上下文

Question

我开始在 React 中通过 ContextAPI 使用钩子(Hook)。

这是我使用钩子(Hook)的上下文的第一个示例:

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);

它可能有更多的状态和处理程序，这可能会变得难以阅读。但最大的飞跃是我不需要首先嵌套所有上下文。

知道这是否是一个好方法以及是否有更好的解决方案？

编辑:我在我的博客上发表了一篇文章讨论这个问题。对于任何有兴趣的人，请访问https://blog.ryukote.io/2019/08/15/react-hooks/在 useContext 部分下。