riskers

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Fultter',

riskers

import 'package:flutter/material.dart';

Widget helloRect() {
  return Container(
    color: Colors.purple,
    width: 200,
    height: 200,
    margin: EdgeInsets.all(16),
    child: Center(child: Text('Hi')),
  );

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

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

---

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

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

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

riskers

simple

• 开发: devServer || CORS
• 部署: nginx

---

web -> nginx -> Java

---

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

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

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

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

最基本的一个 HOC

// define

riskers

import { useDialog } from "@/components/dialog/index";
import DialogTitle from "@material-ui/core/DialogTitle";

const App = () => {
  const [openDialog, closeDialog] = useDialog();

  return <button
    href="#!"
    onClick={() => {
      openDialog({

riskers

docker run -d --name clickhouse-server --ulimit nofile=262144:262144 -p 8123:8123 -p 9000:9000 -p 9009:9009 --privileged=true -v ~/db/clickhouse/log:/var/log/clickhouse-server -v ~/db/clickhouse/data:/var/lib/clickhouse clickhouse/clickhouse-server:22.1.4.30

然后 http://localhost:8123 验证.

使用客户端:

> docker exec -it clickhouse-server /bin/bash

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>