如何实现具有动态状态数的 Context API？

Question

数组中的组件数 listOfComponents 应该是动态的。在我的应用程序中，当应用程序处于运行时，组件会随着时间的推移而添加和删除。当我添加一个新组件时，我想在我的 ExampleContext 中的 listOfComponents 数组中为其添加一个状态。当我删除一个组件时，我想删除状态。只有在 listOfComponents 中的设置在 ID 匹配的位置得到更新时，组件才应该重新呈现。我将如何实施它？

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

export const ExampleContext = createContext()
export const { Consumer: ExampleConsumer } = ExampleContext

export function ExampleProvider({ children }) {
  const [state, setState] = useState({
    listOfComponents: [{
        id: 1,
        settings: {color: 'red'}
    },
    {
        id: 2,
        settings: {color: 'blue'}
    },
    {
        id: 3,
        settings: {color: 'green'}
    }]
 })
  return (
    <ExampleContext.Provider value={[state, setState]}>
      {children}
    </ExampleContext.Provider>
  )
}

export function Component({id}) {
  const [state, setState] = useContext(ExampleContext)
  return (
    <h1> Only rerender me if settings of matching id are updated! </h1>
  )
}

Answer 1

下面是我如何让它与 useMemo 一起工作的。也许这对其他人有帮助，因为我花了一些时间才弄明白。 this 博客 post 也很有帮助。如果有更好的方法请告诉我。

-- App.js

import React, {useContext, useMemo} from 'react';
import {ExampleContext, ExampleProvider} from './Context'

export function Component({id}){
  const [state, setState] = useContext(ExampleContext)

  function onClick(){
    setState(prev => {
      return {...prev, [id]: { color: 'blue'}}
    })
  }

  return useMemo(() => {
    console.log(`update ${id}`)
    return (
      <>
        <h1 style={{color: state[id].color}}>{id}</h1>
        <button onClick={onClick}>{`Update from ${id}`}</button>
      </>
    )
  }, [state[id]])
}

function App() {
  return (
    <ExampleProvider>
        <Component id={1}/>
        <Component id={2}/>
    </ExampleProvider>
  );
}

export default App;

-- Context.js

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

export const ExampleContext = createContext()
export const { Consumer: ExampleConsumer } = ExampleContext

export function ExampleProvider({ children }) {
  const [state, setState] = useState({
    '1': {color: 'red'},
    '2': {color: 'green'},
  })
  return (
    <ExampleContext.Provider value={[state, setState]}>
      {children}
    </ExampleContext.Provider>
  )
}

如何实现具有动态状态数的 Context API？

How to implement the Context API with a dynamic number of states?

javascript

reactjs

react-hooks

react-state-management