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) => {
setLoaded(result);
});
}, []);
return loaded ? loaded : props.default ?? <div>Loading...</div>;
}

<AsyncComponent
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:

HookMotivation
useState

· 4 min read
Gavin Gong

Cityscapes是常用的多任务数据集(主要用于分割)。其中包括大量不同城市的行车记录画面和标注。这段时间正好在用,想看看别人是怎么读它的。所以翻了一下PaddleSeg中读取CityScapes数据集的相关脚本。

文件结构

这个数据集包含很多部分,可以用于许多视觉任务,每个文件夹名称对应一个部分。因为做分割用,所以我主要用原图像(包leftImg8bit)和细标注(包gtFine)。以下是这两个部分的文件结构:

· 3 min read
Gavin Gong

续上集

上次看到使用JSX。在JSX中,可以使用大括号传递变量:

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

当你想传递的props比较长的时候,把它们挨个写上可不是什么方便的做法。所以,你可以这样写:

· 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),
ReLU(),
Linear(channel // reduction, channel, bias_attr=False),
Sigmoid()
)

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)