// en.js, zh.js
export default {
  menu: {
    home: 'Home',
  },
  login: {
    loginBtn: 'Login'
  }
};

// i18n.js
import i18n from "i18next"
import { initReactI18next } from "react-i18next"
// import LanguageDetector from "i18next-browser-languagedetector"
import En from './language/en'
import Zh from './language/zh'
console.log('navigator==', navigator)
const langType: string = sessionStorage.getItem("langType")
i18n
  // .use(LanguageDetector)  // 获取浏览器默认的语言（浏览器默认通常是en）
  .use(initReactI18next).init({
    resources:  {
      en: {
        translation: En
      },
      zh: {
        translation: Zh
      }
    },
    interpolation: {
      escapeValue: false,
    },
    lng: langType,
    debug: false,
    // fallbackLng: "zh", //默认当前环境的语言
    fallbackLng: ["zh", "en", "dev"],
    detection: {
      lookupSessionStorage: "langType",
      caches: ["sessionStorage"],
      order: ["sessionStorage"],
      lookupQuerystring: "lng"
    }
  })
export default i18n

// 切换组件里 切换时调用
import i18n from "@/i18n"
i18n.changeLanguage(val.key);

import { FormattedMessage, useIntl } from "react-intl";

<FormattedMessage id="usernameNotEmpty" />
// const intl = useIntl()
// intl.formatMessage({ id: `${intlKey}` })

// a, b 为依赖项，当依赖项变化时才会变化，否则使用缓存的
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

// a, b 为依赖项，当依赖项变化时才会变化，否则使用缓存的
const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

// 用法： useImperativeHandle(ref, createHandle, [deps])
// useImperativeHandle 可以在使用 ref 时自定义暴露给父组件的实例值。
// 在大多数情况下，应当避免使用 ref 这样的命令式代码。
// useImperativeHandle 应当与 forwardRef 一起使用：
function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

// 在 渲染 <FancyInput ref={inputRef} /> 的父组件可以调用 inputRef.current.focus()。

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);
  // ...
  // 在开发者工具中的这个 Hook 旁边显示标签
  // e.g. "FriendStatus: Online"
  useDebugValue(isOnline ? 'Online' : 'Offline');

  return isOnline;
}

import { createContext, useReducer } from "react"
import { ContextProps } from "../types"
import { configState, configAction, ConfigReducerType } from "../types/reducer"
import { initialConfigState, configReducer } from '@/reducers/configReducer'
export const ConfigContext = createContext<{
  configStates: configState
  dispatch:  React.Dispatch<configAction>
}>({
  configStates: initialConfigState,
  dispatch: () => {}
})
export function ConfigProvider(props: ContextProps) {
  const [configStates, dispatch] = useReducer<ConfigReducerType>(configReducer, initialConfigState)
  return (
    <ConfigContext.Provider
      value={{ configStates, dispatch }}>
      {props.children}
    </ConfigContext.Provider>
  )
}

// providers/config.tsx  定义context 和 provider
import { createContext, useReducer } from "react"
import { ContextProps } from "../types"
import { configState, configAction, ConfigReducerType } from "../types/reducer"
import { initialConfigState, configReducer } from '@/reducers/configReducer'
export const ConfigContext = createContext<{
  configStates: configState
  dispatch:  React.Dispatch<configAction>
}>({
  configStates: initialConfigState,
  dispatch: () => {}
})
export function ConfigProvider(props: ContextProps) {
  const [configStates, dispatch] = useReducer<ConfigReducerType>(configReducer, initialConfigState)
  return (
    <ConfigContext.Provider
      value={{ configStates, dispatch }}>
      {props.children}
    </ConfigContext.Provider>
  )
}

import { useContext } from 'react'
import { ConfigContext } from "@/providers/config"
// 函数组件里使用hooks获取到数据，
const { configStates, dispatch } = useContext(ConfigContext)
const { siderCollapse } = configStates
// dispatch 调用
dispatch({ type: 'UPDATE_CONFIG', payload: { siderCollapse: true }})

// main.js
import reducers from '@/store/reducers/index'
import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({
  reducer: reducers
})
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <Provider store={store}>
    <App />
  </Provider>
)

import { shallowEqual, useSelector, useDispatch } from "react-redux";

const { siderCollapse } = useSelector((state: any) => state.globalConfig, shallowEqual)
const dispatch = useDispatch() 

// dispatch 调用
dispatch({ type: 'UPDATE_CONFIG', payload: { siderCollapse: true }})

import svgr from '@svgr/rollup';
export default defineConfig({
  plugins: [
    ...,
    svgr()
  ]
})

import { ReactComponent as IcZip } from '@/assets/icons/zip.svg';
// dom
<IcZip />

import { ReactComponent as IcZip } from '@/assets/icons/zip.svg';
import IconBox from '@/components/IconBox'
// dom
<IconBox>
  <IcZip />
</IconBox>