我试图理解处理大量子组件时的开销，使用reducer从状态中提取数据。
考虑到这三种不同的方法，哪一种是最有效的？我的直觉告诉我选择二。但我说得对吗而且，在它被编译之后，它会有那么大的不同吗？

选项一

// call the reducer once, and pass all data

const MainComponent = () => {
  const { data } = useMyReducer()

  return (
    <SubComponent id="one" data={data} />
    <SubComponent id="two" data={data} />
    <SubComponent id="three" data={data} />
    <SubComponent id="four" data={data} />
    // and many more
  )
}

const SubComponent = ({id, data}) => {
  const myData = data[id]

  return (
    <div>{myData}</div>
  )
}

选项二

// call the reducer once, and pass required data only

const MainComponent = () => {
  const { data } = useMyReducer()

  return (
    <SubComponent id="one" data={data.one} />
    <SubComponent id="two" data={data.two} />
    <SubComponent id="three" data={data.three} />
    <SubComponent id="four" data={data.four} />
    // and many more
  )
}

const SubComponent = ({id, data}) => {

  return (
    <div>{data}</div>
  )
}

选项三

// call the reducer in the subcomponent

const MainComponent = () => {

  return (
    <SubComponent id="one" />
    <SubComponent id="two" />
    <SubComponent id="three" />
    <SubComponent id="four" />
    // and many more
  )
}

const SubComponent = ({id}) => {
  const { data } = useMyReducer()
  const myData = data[id]

  return (
    <div>{myData}</div>
  )
}

edit：显示useMyReducer代码-本质上是访问上下文，还有react的useReducer和createContext

import { useContext } from 'react'
import { MyContext } from './context'

const useMyReducer = () => {
    const context = useContext(MyContext)

    if (context === undefined) {
        throw new Error('useMyReducer must be used within MyContext')
    }

    return context
}

export default useMyReducer

// in context.js
export const MyContext = createContext(initialState)
export const MyProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, {})
  ... // reducer functions

  const value = { state, // plus functions etc }

  return <MyContext.Provider value={value}>{children}</MyContext.Provider>
}