什么是反应中的 createLegacyRoot？

Question

我正在尝试复制与 context section 的反应文档相同的示例，结合反应钩子，但反应 devtool 通知我的上下文是由 createLegacyRoot() 从 [=12= 呈现的].它没有任何功能问题，但我只是想知道为什么它是遗留的，是否有任何新的创建上下文的方法将被提议。

这是我正在做的。

const ThemeContext = React.createContext()

function ContextApp() {
  const [theme, setTheme] = React.useState('light')

  return (
    <ThemeContext.Provider value={[theme, setTheme]}>
      <ThemeSwitcherUseContext />
      <ThemeInformationClass />
      <ThemeInformationOldStyleConsumer />
    </ThemeContext.Provider>
  )
}


const ThemeSwitcherUseContext = () => {
  const [theme, setTheme] = React.useContext(ThemeContext)
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Switch to {theme === 'light' ? 'dark' : 'light'}
    </button>
  )
}

class ThemeInformationClass extends React.Component {
  static contextType = ThemeContext
  render() {
    return <div>class Theme="{this.context[0]}"</div>
  }
}

const ThemeInformationOldStyleConsumer = () => (
  <ThemeContext.Consumer>
    {([theme]) => <div>function Theme="{theme}"</div>}
  </ThemeContext.Consumer>
)

Answer 1

这是指将随 React 18 推出的并发模式，新语法是

ReactDOM.createRoot(rootNode).render(<App />);

https://reactjs.org/docs/concurrent-mode-reference.html

什么是反应中的 createLegacyRoot？

What is a createLegacyRoot in react?

reactjs

react-dom