riskers

const App = () => {
  const device = useDevice();
  
  return <div className={getClassName(device)}>
    Test
  </div>
}

riskers

import { useCookies } from "react-cookie";
import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
import styles from "./style.module.css";
import { useLocale } from "@/locales/i18n";

const App = () => {
  // 这里获取 intl
  const __ = useLocale();
    
  return <div>

riskers

都可以做 SSO

• CAS: 多个系统只需登录一次，无需重复登录
• oAuth: 第三方系统访问主系统资源，用户无需将在主系统的账号告知第三方，只需通过主系统的授权，第三方就可使用主系统的资源（如：APP1需使用微信支付，微信支付会提示用户是否授权，用户授权后，APP1就可使用微信支付功能了）

riskers

prettier 是更强大的 editorconfig ，读取根目录的 .editorconfig 和 .prettierrc 去执行格式化代码的命令。

---

从之前的 editorconfig + ESLint + husky 来组成的前端代码风格的实践因为 TypeScript 的到来，前端的工程体系又加入了 TSLint 。

而 TSLint 远远不如 ESLint，很多 ESLint 上有的比如 = 两边的空格数量在 TSLint 上是不检查的。这时候 prettier 又出来了，它仅仅做 Lint 里代码风格检查的那一部分，至于代码质量检查它是不管的：

TSLint 已经被废弃，因为 ESLint 支持 TypeScript 了

riskers

在 reducer 中，都是返回一个新对象，否则组件是不会更新 ui 的。而返回新对象，可以:

• Object.assign：比较 hack，每次新生成一个对象
• ...state
• immutable.js

riskers

高阶组件：接收函数作为输入，或者输出另一个函数的一类函数，被称作高阶函数。对于高阶组件，它描述的便是接受React组件作为输入，输出一个新的React组件的组件。即高阶组件通过包裹（wrapped）被传入的React组件，经过一系列处理，最终返回一个相对增强（enhanced）的React组件，供其他组件调用。

什么时候使用高阶组件：在React开发过程中，发现有很多情况下，组件需要被"增强"，比如说给组件添加或者修改一些特定的props，一些权限的管理，或者一些其他的优化之类的。而如果这个功能是针对多个组件的，同时每一个组件都写一套相同的代码，明显显得不是很明智，所以就可以考虑使用HOC。

react-redux 的 connect 方法就是一个 HOC ，他获取 wrappedComponent ，在 connect 中给 wrappedComponent 添加需要的 props。

最基本的一个 HOC

// define

riskers

VSCode 中写 TS 使用的快捷键

我已经习惯使用 IDEA 写 Java，所以在 VSCode 里写 Typescript 也想要 rename 、go to defined 这些功能。这些功能在最开始写 JavaScript 的时候还真的没用过，每次都是全局搜索，很 low ~

基本参考这篇文章 https://johnpapa.net/refactoring-with-visual-studio-code/ 然后按照自己的习惯改改快捷键就行了。

常用功能有(快捷键是我自己设置的):

• format: cmd + shift + l

riskers

Source : Learn to combine RxJs sequences with super intuitive interactive diagrams

Legend

Merge

Concat

riskers

// https://github-riskers-blog.oss-cn-qingdao.aliyuncs.com/20190117210031.gif

import 'package:flutter/material.dart';
import 'package:redux/redux.dart';
import 'package:redux_thunk/redux_thunk.dart';
import 'package:flutter_redux/flutter_redux.dart';

class AppState {
  final int count;
  final int clickCount;

riskers

// es6
export var foo = 'foo';
setTimeout(() => foo = 'baz', 500);

// main
import {foo} from './t.js';
console.log(foo); // foo
setTimeout(() => console.log(foo), 500); // baz