清洁器反应上下文

Question

我开始使用react与ContextApi中的钩子。

这是我上下文的第一个示例：

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 。