javascript - React - 在 DOM 中多次使用完全相同的组件实例

Question

我有一个 React 组件，它是一个 div、一些样式和文本。具有完全相同值的确切组件在 DOM 中使用了很多次。我试图弄清楚如何只创建该组件的一个实例，并在我需要它的任何地方简单地呈现完全相同的实例。我尝试使用内存，但这似乎是在内存实例本身。

为了清楚起见，我想记住组件，以便从任何地方调用具有相同参数的函数每次都会返回完全相同的实例。

const Component = React.memo((value) => (<div>...</div>));

调用它似乎可以记住特定的实例，但每次从 Virtual DOM 中的不同位置调用它时，它仍然会创建一个全新的实例，即使如果参数相同。据我了解，React.Memo 只是一个特定实例的包装器。

我想到了一些 hacky 方法来做到这一点，但想在进一步探索之前先问一下。

Answer 1

您可以使用上下文 https://reactjs.org/docs/context.html

const AppContext = React.createContext(null);
            
const App = () => (
  <AppContext.Provider value={...//your component} >
    //...
  </AppContext.Provider>)
)

const ChildComponent = () => {
  const Component = useContext(AppContext);
  
  return (
    <div>
      //...
      {Component}
    </div>
  )
}