chunbin1/blog

git actions + dumijs 写的博客

blog's Issues

TS is关键字

常用于函数的返回值，判断类型是否是某种类型

function isString(test: any): test is string {
  return typeof test === 'string'
}

function example(foo: any) {
  if (isString(foo)) {
    console.log('it is a string' + foo)
    // 在这里 foo的类型已经变成了string,ts编译器不会报错
    console.log(foo.length) // string function
  } else {
    console.log('not string')
  }
}
example('hello world')
example(2)

实用命令行工具

tig

用来git diff可视化

安装

apt install tig

trans

翻译软件
链接

React+Typescript如何写canvas

参考：链接 -- 需要翻墙

import React, { useRef, useEffect } from 'react';

const SimpleCanvasExample: React.FC<{}> = () => {
  let canvasRef = useRef<HTMLCanvasElement | null>(null);
  let canvasCtxRef = React.useRef<CanvasRenderingContext2D | null>(null);

  useEffect(() => {
    // Initialize
    if (canvasRef.current) {
      canvasCtxRef.current = canvasRef.current.getContext('2d');
      let ctx = canvasCtxRef.current;
      ctx!.beginPath();
      ctx!.arc(95, 50, 40, 0, 2 * Math.PI);
      ctx!.stroke();
    }
  }, []);

  return <canvas ref={canvasRef}></canvas>;
};

export default SimpleCanvasExample;

Parameter Properties

看mobx源码的时候发现了 ts的constructor可以省点代码

饮食和健康

盐

151最小栈

题目链接

基于http的主动推送功能

使用Content-Type: multipart/x-mixed-replace; 可以实现服务端的主动推送

参考文章：
协议
使用 multipart/x-mixed-replace 实现 http 实时视频流

Hooks原理

1. useState的原理

function App() {
  const [num, updateNum] = useState(0);
  
  function increment() {
    setTimeout(() => {
      updateNum(num + 1);
    }, 1000);
  }
  
  return <p onClick={increment}>{num}</p>;
}

快速点击5次，视图上显示多少？
答案：1
因为视图还没更新，所以num还是0，所以updateNum

2. 如何解决这个问题？
   使用函数updateNum(num=>num+1)

从url输入到页面渲染的过程

threejs备忘录

参考文章

threejs基础

146. LRU 缓存

思路：
利用Map有顺序的原理

1. get的时候从map中删除，再塞回去。
2. put的时候先把有的delete掉，然后如果超过缓存最大值，就删除第一个

/**
 * @param {number} capacity
 */
var LRUCache = function(capacity) {
    this.capacity = capacity;
    this.map = new Map();
};

/** 
 * @param {number} key
 * @return {number}
 */
LRUCache.prototype.get = function(key) {
    if(this.map.has(key)){
        let temp=this.map.get(key)
         this.map.delete(key);
         this.map.set(key, temp);
         return temp
    }else{
        return -1
    }
};

/** 
 * @param {number} key 
 * @param {number} value
 * @return {void}
 */
LRUCache.prototype.put = function(key, value) {
    if(this.map.has(key)){
        this.map.delete(key);
    }
    this.map.set(key,value);
    if(this.map.size > this.capacity){
     
        this.map.delete(this.map.keys().next().value);
    }
};

/**
 * Your LRUCache object will be instantiated and called as such:
 * var obj = new LRUCache(capacity)
 * var param_1 = obj.get(key)
 * obj.put(key,value)
 */

React setState的同步异步问题

求输出结果
1.

class App extends React.Component{
  state = { number:0 }
  componentDidMount = ()=>{
    this.setState({ number:this.state.number + 1 },()=>{   console.log( 'callback1', this.state.number)  })
    console.log(this.state.number)
    this.setState({ number:this.state.number + 1 },()=>{   console.log( 'callback2', this.state.number)  })
    console.log(this.state.number)
    this.setState({ number:this.state.number + 1 },()=>{   console.log( 'callback3', this.state.number)  })
    console.log(this.state.number)
  }

  render(){
      return <div>
          { this.state.number }
      </div>
  }
}

输出：
0 0 0 callbackl1 1 callback2 1 callback3 1

类型完整的React.forwardRef写法

需求：一个评论用的窗口，通过forwardRef传递方法给父组件调用

export type CommentHandler = {
  openDrawer: () => void
  closeDrawer: () => void
}

const CommentDrawer: React.ForwardRefRenderFunction<CommentHandler, IProps> = (props,ref)=>{

 const openDrawer = ()=>{};
 const closeDrawer = ()=>{};
  useImperativeHandle(ref, () => {
    return {
      openDrawer,
      closeDrawer,
    }
  })
  return <div></div>
}

export default forwardRef(CommentDrawer)

使用

const ref = useRef<React.ElementRef<typeof CommentDrawer>>(null)
ref.current?.openDrawer()

git命令备忘

git checkout

  git checkout -b <new_branch> [<start_point>] // 从start_point checkout出new_branch

 git checkout <branch> <location> // 用branch分支下的location目录覆盖当前的location