React Context 的原理和性能问题是什么？如何优化？

const ThemeContext = createContext('light')

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Child />
    </ThemeContext.Provider>
  )
}

function Child() {
  const theme = useContext(ThemeContext)
  return <div>{theme}</div> // 'dark'
}

// ❌ 每次渲染都创建新对象
function App() {
  const [count, setCount] = useState(0)
  
  return (
    <UserContext.Provider value={{ user, logout }}>
      {/* count 变化时，即使用户信息没变，消费 UserContext 的组件也会重渲染 */}
      <ExpensiveTree />
    </UserContext.Provider>
  )
}

function App() {
  const [count, setCount] = useState(0)
  const [user, setUser] = useState(null)

  const value = useMemo(() => ({ user, logout }), [user])

  return (
    <UserContext.Provider value={value}>
      <ExpensiveTree />
    </UserContext.Provider>
  )
}

// 将频繁变化的和不变的分开
const UserContext = createContext()      // 不常变化
const ThemeContext = createContext()     // 偶尔变化
const CartContext = createContext()      // 频繁变化

// 各自独立 Provider
<UserContext.Provider value={userValue}>
  <ThemeContext.Provider value={themeValue}>
    <CartContext.Provider value={cartValue}>
      <App />
    </CartContext.Provider>
  </ThemeContext.Provider>
</UserContext.Provider>

import { createContext, useContextSelector } from 'use-context-selector'

const UserContext = createContext()

function Name() {
  // 只订阅 user.name，其他属性变化不触发
  const name = useContextSelector(UserContext, state => state.name)
  return <div>{name}</div>
}

// ❌ count 在 Provider 外面，变化不影响 Provider
function App() {
  return (
    <UserContext.Provider value={value}>
      <Counter /> {/* count 变化不影响其他消费者 */}
    </UserContext.Provider>
  )
}

const Counter = React.memo(() => {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
})