更清洁的 React 上下文

Question

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

这是我使用 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);

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

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

编辑：我在我的博客上写了一个 post 来讨论这个问题。对于任何感兴趣的人，请转到 useContext.

部分下的 https://blog.ryukote.io/2019/08/15/react-hooks/

更清洁的 React 上下文

Cleaner React contexts

reactjs

react-context

react-hooks