【学习打卡】第10天 实战旅游项目

课程名称：[React 17/18 系统精讲 结合TS打造旅游电商平台]

课程章节： 理解React/redux设计模式

主讲老师：阿莱克斯

课程内容：

1. 【更新state】Action与Reducer处理
2. 【更新state】Action与Reducer处理
3. 【i18n】完成网站语言切换

课程收获：

为menu菜单加上click事件 action是一个对象

  menuOnClick = (e: any) => {
    console.log(e);
    // 创建行动对象 通过 dispatch 下发给 Reducer
    const action = {
      type: "change_language",
      payload: e.key,
    };
    store.dispatch(action);
  };

Reducer中接收

export default (state = defaultLanguage, action: any) => {
  if (action.type === "change_language") {
    return { ...state, language: action.payload };
  }
  return state;
};

触发回调订阅组件

    store.subscribe(() => {
      const storeData = store.getState(); //获取当前store的值
      this.setState({
        language: storeData.language, // 重新赋值
      });
    });

i18语言切换原理

• 语言包作为静态资源单独保存 json
• 切换语言设置 选择不用的语言文件
• react 使用 react-i18next插件
• npm install react-i18next i18next --save

实例化

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

const resource = {
  en: {
    translation: translation_en,
  },
  zh: {
    translation: translation_zh,
  },
};
// lng: 初始化语言
i18n
  .use(initReactI18next)
  .init({ resources, lng: "zh", interpolation: { escapeValue: false } });
export default i18n;

class 类组件 引入HOC函数 withTranslation

import { withTranslation } from "react-i18next";

使用高阶函数后 取消class的导出

class HomePageComponent extends React.Component
// 第一个参数是语言的命名空间
const HomePage = withTranslation()(HomePageComponent)

使用WithTranslation定义类型 使用t函数包裹生成文字

{t("home_page.hot_recommended")}

函数式组件 useTranslation

const Footer: React.FC = () => {
  const { t } = useTranslation();

使用 changeLanguage 切换语言

   import { changeLanguage } from "i18next";
   changeLanguage(action.payload).then((r) => console.log(r));

感想

在这次课程中，分别学习了class 和 fc 的语言切换的不同写法，对于之前不懂这个方案的我，有很大的启发，class 在 this 的调用上相比很麻烦，但是又感觉整体有迹可循， 对于react直接放弃class的原因可能就是因为this的指向吧 迈向函数式编程之后 在hoc等高级用法上可能会带来一些学习成本 不过随着大流走吧 正好也减轻了又要学class 又要学 hooks咯 vue中的组合式API也是借鉴了带来的有状态的函数式吧