React高级概念之Context用法详解

// 注释Context中数据的类型
interface IMyContext {
    lang: string;
    changeLang: (lang: string) => void
}
// React.createContext的参数是Context中数据的默认值。
const MyContext = React.createContext<IMyContext >({
    lang: 'zh_CN',
    changeLang: () => { throw Error('你必须自己实现这个方法') }
})

import { MyContext } from './myContext'
class ContextDemo extends React.Component<{}> {
    render() {
        return (
            <MyContext.Provider
                value={someValue} // 放入数据，它的数据类型必须与IMyContext接口兼容
            >
                // children
            </GlobalContext.Provider>
        )
    }
}

class MyNestedClass extends React.Component<{}> {
    static contextType = MyContext // 订阅第一步创建的Context 
    render() {/**todo*/}
}

function MyNestedFunc() {
  const myContext = useContext(MyContext) // 订阅第一步创建的Context
  return (/**todo*/)
}

<MyContext.Consumer>
    {(context) => <MyNestedCom lang={context.lang}/>}
</MyContext.Consumer>

// context要传递的数据类型
interface IStyleContext {
    theme: 'light' | 'dark';
    size: 's' | 'm' | 'l';
    changeTheme: (theme: 'light' | 'dark') => void;
    changeSize: (size: 's' | 'm' | 'l') => void;
}
function ProviderCom() {
 // 用 useReducer 创建状态
  const [style, dispatch] = useReducer(reducer, {theme: 'light', size: 'm'})
  // 避免 ContextVal 被频繁新建
  const ContextVal = useMemo<IStyleContext>(() => {
    return {
      theme: style.theme,
      size: style.size,
      changeSize: (size: IStyleContext['size']) => dispatch({type: 'size', payload: size}),
      changeTheme: (theme: IStyleContext['theme']) => dispatch({type: 'theme', payload: theme})
    }
  }, [style.size, style.theme])
  return (
    <StyleContext.Provider value={ContextVal}> // 将要传递的数据放到 Context 中
      {/* todo */}
    </StyleContext.Provider>
  )
}