Skip to main content

9 posts tagged with "frontend"

View All Tags

Typescript 中的 promise

· 6 min read
VisualDust
VisualDust
Ordinary Magician | Half stack developer

Promise 是一个对象，它代表了一个异步操作的最终完成或者失败。本质上 Promise 是一个函数返回的对象，我们可以在它上面绑定回调函数，这样我们就不需要在一开始把回调函数作为参数传入这个函数了。Promise 类存在于很多现代 JavaScript 引擎中，其主要目的是为异步／回调风格的代码带来同步风格的错误处理。

React Components 生命周期

· 3 min read
VisualDust
VisualDust
Ordinary Magician | Half stack developer

在 React.Component 的子类中有个必须定义的 render() 函数。render() 方法是 class 组件中唯一必须实现的方法。当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：

  • React 元素。通常通过 JSX 创建。例如，<div /> 会被 React 渲染为 DOM 节点，<MyComponent /> 会被 React 渲染为自定义组件，无论是 <div /> 还是 <MyComponent /> 均为 React 元素。
  • 数组或 fragments。 使得 render 方法可以返回多个元素。
  • Portals。可以渲染子节点到不同的 DOM 子树中。
  • 字符串或数值类型。它们在 DOM 中会被渲染为文本节点
  • 布尔类型或 null。什么都不渲染。（主要用于支持返回 b && <Child /> 的模式，其中 b 为布尔类型。)

render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。

关于 setTimeout 的一些小故事

· 5 min read
VisualDust
VisualDust
Ordinary Magician | Half stack developer

@lideming曾经向我举过几个setTimeout的有趣例子。我先前不是很了解 JavaScript 的并发模型和事件循环，这些例子对我来说都算得上是巨坑无比了。

setTimeout 和事件循环​

函数 setTimeout 接受两个参数：待加入队列的消息和一个时间值（可选，默认为 0）。这个时间值代表了消息被实际加入到队列的最小延迟时间。如果队列中没有其它消息并且栈为空，在这段延迟时间过去之后，消息会被马上处理。但是，如果有其它消息，setTimeout 消息必须等待其它消息处理完。因此第二个参数仅仅表示最少延迟时间，而非确切的等待时间。

下面的例子演示了这个概念（setTimeout 并不会在计时器到期之后直接执行）：

使用 css module 避免到处refactor

· 3 min read
VisualDust
VisualDust
Ordinary Magician | Half stack developer

简述​

有时想给一个组件加一个style，结果之前写className的时候没弄好导致这个style出现在了一堆无关组件上，结果就得去疯狂refactor,或者到处加!important，或者通过什么其他肮脏的手段解决。之前光知道后缀为.module.css代替.css能防止手忙脚乱，但是一直不知道它有个专门的名字。

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

使用 css modlues 能在javascript中像变量名那样使用css的className。

React 异步渲染内容

· 2 min read
VisualDust
VisualDust
Ordinary Magician | Half stack developer

在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>}
/>;

Introducing React Query : Hooks for fetching

· 2 min read
VisualDust
VisualDust
Ordinary Magician | Half stack developer

  • 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)

React Hooks

· 4 min read
VisualDust
VisualDust
Ordinary Magician | Half stack developer

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