React context

动态context

import * as React from "react";

const ThemeContext = React.createContext(null)
const ThemeProvider = ThemeContext.Provider


function ConsumerDemo(){
  const {color,background} = React.useContext(ThemeContext)
  return (
    <div style={{color,background}}>消费者</div>
  )
}

const Son = React.memo(()=><ConsumerDemo/>)  //子组件
function getRandomColor() {
  //16进制随机数生成 颜色值
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
  return color;
}

export default function ProviderDemo(){
  const [contextValue,setContextValue] = React.useState({color:"#cccccc",background:"pink"})
  return (
    <div>
      <ThemeProvider value={contextValue}>
        <Son/>
      </ThemeProvider>
      <button onClick={()=>{setContextValue({color:"#fff",background:`${getRandomColor()}`})}}>切换主题</button>
    </div>
  )
}