Skip to content

Instantly share code, notes, and snippets.

😀
Coding!

一波不是一波 riskers

😀
Coding!
Block or report user

Report or block riskers

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@riskers
riskers / HOC.md
Last active May 27, 2019
react HOC / render props / hook
View HOC.md

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

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

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

最基本的一个 HOC

// define
@riskers
riskers / README.md
Last active Jul 25, 2019
在 VSCode 中飞快使用 Typescript (极度舒适)
View README.md

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
riskers / README.md
Last active Apr 9, 2019
前后端分离
View README.md

simple

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

web -> nginx -> Java


@riskers
riskers / README.md
Last active Aug 1, 2019
从 prettier 看前端工程化
View README.md

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


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

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

@riskers
riskers / redux-combine.dart
Last active Jan 17, 2019
flutter redux demo
View redux-combine.dart
// 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
riskers / function_widget.dart
Last active Jan 12, 2019
flutter 组件化
View function_widget.dart
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
riskers / Column.dart
Last active Jan 23, 2019
Flutter Note Code
View Column.dart
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
riskers / .dockerignore
Last active Mar 11, 2019
eggjs Dockerfile + gitlab ci
View .dockerignore
app/**/*.js
test/**/*.js
config/**/*.js
app/**/*.map
test/**/*.map
config/**/*.map
@riskers
riskers / rxjs-diagrams.md
Created Dec 14, 2018 — forked from PCreations/rxjs-diagrams.md
Super Intuitive Interactive Diagrams to learn combining RxJS sequences by Max NgWizard K
@riskers
riskers / main.md
Last active Feb 2, 2019
关于 websocket 心跳的一些记录
View main.md

长连接为什么要保持心跳?

websocket心跳是为了让 client 告诉 server 『我还活着,没有掉线』而存在的,否则 server 可能会断掉连接。

国内移动无线网络运营商在链路上一段时间内没有数据通讯后, 会淘汰NAT表中的对应项, 造成链路中断。而国内的运营商一般NAT超时的时间为5分钟,所以通常我们心跳设置的时间间隔为3-5分钟。

一般是 client send ping ,server 返回 pong 保持心跳。

var heartCheck = {
You can’t perform that action at this time.