Skip to main content

· 2 min read
Gavin Gong

在React(typescript)中渲染需即时加载的元素。主要思路是使用useEffect Hook加载内容,而后使用useState Hook在加载完成时重新渲染界面。简短的代码描述如下:

interface AsyncCompomentProps {
func: () => Promise<JSX.Element>;
default?: JSX.Element;

function AsyncComponent(props: AsyncCompomentProps) {
const [loaded, setLoaded] = useState<JSX.Element>(null);
useEffect(() => {
props.func().then((result) => {
}, []);
return loaded ? loaded : props.default ?? <div>Loading...</div>;

func={async () => {
await new Promise((r) => setTimeout(r, 3000));
return <div>hi</div>;
default={<div>I'm loading...</div>}

· 2 min read
Gavin Gong


ATMat the moment现阶段
AFAIK/AFAICTas far as I know / can tell就我所知
TBHTo be honest老实说
TL;DRToo Long; Don't Read.PR 内容太多,没办法看
PRPull Request.拉取请求,给其他项目提交代码
PTALPlease take a look.请看一看
LGTMLooks Good To Me.代码已经过 review,可以合并
SGTMSounds Good To Me.和上面那句意思差不多,也是已经通过了 review 的意思
WIPWork In Progress.告诉项目维护者这个功能还未完成,方便维护者前 review 已提交的代码
PTALPlease Take A Look.提示项目 Owner/contributor review
TBRTo Be Reviewed.提示维护者进行 review
TBDTo Be Done (or Defined/Discussed/Decided/Determined).根据语境不同意义有所区别,但一般都是还没搞定的意思
IMOIn My Opinion在我看来、依我看、依我所见
IMHOIn My Humble Opinion IMO谦虚的说法
DNMDo not merge.不要合并

· 2 min read
Gavin Gong
  • What is React Query? it's a library for fetching data in React applications.

  • Why I need a data fetching library?

    1. Since React is a UI library, there is no specific pattern for data fetching.
    2. There are useEffect hooks for data fetching and useState hooks to maintain component state like loading, error or resulting data.
    3. If the data is needed throughout the app, we tend to use state management libraries. Although most of the state management libraries are good for working with client states, they are not great for working with asynchronus or server states. (server states are very different to client states)

· 4 min read
Gavin Gong

Hooks are a new addition in React 16.8. They let you "hook into" React state and lifecycle features from function components. Hooks don't work inside classes — they let you use React without classes. In older React, it's hard to reuse stateful logic between components. The older React doesn't offer a way to "attach" reusable behavior to a component. With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community.

There are nine of them:


· 4 min read
Gavin Gong




· 3 min read
Gavin Gong



  const children = 'Hello World'
const className = 'container'
const props = {className, children}
const element = <div className={props.className}>{props.children}</div>


· One min read
Gavin Gong
from paddle.nn import *

class SELayer(Layer):
def __init__(self, channel, reduction=16):
super(SELayer, self).__init__()
self.avg_pool = AdaptiveAvgPool2D(output_size=[None, None])
self.fc = Sequential(
Linear(channel, channel // reduction, bias_attr=False),
Linear(channel // reduction, channel, bias_attr=False),

def forward(self, x):
b, c, _, _ = x.size()
y = self.avg_pool(x).view(b, c)
y = self.fc(y).view(b, c, 1, 1)
return x * y.expand_as(x)