2022.7.31 useContext()的custom hook封装

```custom hook  useContext.ts```
import { useState, useEffect } from "react";
import { createContext } from "react";

interface ContextProviderProps {
  children: any
}

export const Context = createContext<any>(null);

export const ContextProvider: React.FC<ContextProviderProps> = ({children}) => {    
  //这种children写法则定死了需要传一个子组件进来
  const [userInfo, setUserInfo] = useState({});
  useEffect(() => {
    const timer = setTimeout(() => {    
      setUserInfo({
        username: "张志明",
        password: "123456"
      })
    }, 2000);
    return () => {
      clearTimeout(timer)
    }
  }, [])
  return <>
    <Context.Provider value={{userInfo}}>
      {children}
    </Context.Provider>
  </>
}

```App.tsx```
import React, { ReactElement } from 'react'
import Parent from '../src/components/Parent';
import { ContextProvider } from '../src/hooks/useContextProvider';
interface AppProps {

}

const App: React.FC<AppProps> = ({}): ReactElement => {
  return (
    <div>
      <ContextProvider>
        <Parent />
      </ContextProvider>

      {/* 这两种写法是等价的,且属性名只能是children,代表子组件 */}

      <ContextProvider children={<Parent />}/>
      
    </div>
  )
}

export default App