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

编程问答 2022-06-09

问题描述

我有一个React组件，它是一个div，一些样式和文本。具有完全相同值的精确组件在DOM中使用了很多次。我试图弄清楚如何仅创建该组件的一个实例，并在需要的任何地方仅提供完全相同的实例。我尝试使用备忘录，但这似乎是在对实例本身进行备忘录。

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

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

调用此命令似乎是在记住特定的 instance ，但每次从虚拟DOM中的不同位置调用它时，它仍会仍然创建一个全新的实例如果参数相同。据我了解，React.Memo只是特定实例的包装。

我已经想到了一些方法，但是想在进一步探索之前先提出疑问。

解决方法

您可以使用上下文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>
  )
}
javascriptmemoizationreactjsreactjsreactjsreactjs