Live Note

Remain optimistic

Posted on Edited on

开始新一轮的学习

大晴天，白天上课，晚上班会。在傍晚时发现了有一丝的腰疼。晚上回到寝室突然又有点心绞痛的迹象···。
年纪轻轻应该不会有大碍，应该吧···毕竟也没有去检查过身体。
今天开始应该会把兼职辞了，开始新的学习吧。驾照什么的···就留着寒暑假有空再说吧。

date: 22:35 2018/10/30

Posted on Edited on In

在 TypeScript 的类型系统中，逆变（Contravariance）、协变（Covariance）、双变（Bivariance） 和 不变（Invariance） 是描述类型兼容性和子类型关系的重要概念。这些术语来源于类型理论，主要用于处理函数类型、泛型和接口的赋值规则。理解这些概念不仅能帮助我们编写更安全的代码，还能让我们更好地设计类型系统。本文将逐一讲解这四种变型，辅以代码示例，让你轻松掌握它们的含义与应用。

Read more »

Posted on Edited on

开店第一天

  • 确定了店名，就叫 Edward Store，暂时当个杂货铺吧，后期需要转型的话也方便。
  • 注册域名。
  • 开 Shopify 店铺。

已完成事件

  • 注册域名
  • 注册 shopify 店铺

Posted on Edited on In

useMemo

useMemo 是拿来保持一个对象引用不变的。useMemo 和 useCallback 都是 React 提供来做性能优化的。比起 classes， Hooks 给了开发者更高的灵活度和自由，但是对开发者要求也更高了，因为 Hooks 使用不恰当很容易导致性能问题。

假设有个 component，在 dataConfig 变化的时候重新去 fetchData：

1
2
3
4
5
6
<Child
  fetchData={() => {
    // fetch data
  }}
  dataConfig={{ id: getId(queryId) }}
/>

如果是个 Class Component，会这么写：

1
2
3
4
5
6
7
class Child extends React.Component<Props> {
  componentWillReceiveProps(nextProps: Props) {
    if (nextProps.dataConfig !== this.props.dataConfig) {
      nextProps.fetchData(nextProps.dataConfig)
    }
  }
}

使用 Hooks 后长这样：

1
2
3
4
5
const Child = ({ fetchData, dataConfig }: Props) => {
  useEffect(() => {
    fetchData(dataConfig)
  }, [fetchData, dataConfig])
}

使用 Class Component 时我们需要手动管理依赖，但是使用 Hooks 时会带来副作用：React 使用的是Object.is()，如果fetchData的 reference 变了，也会触发 useEffect。
虽然逻辑上 React 的处理是合理的，但是还是需要手动去解决它导致的性能问题：官方提供了 useCallback 这个 hooks，用于解决函数引用问题。

Read more »

Posted on Edited on In

useRef

  • mutable ref
  • presist

eg: 实现一个需求：点击按钮时 input 自动聚焦。

  • createRef 实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const HomePage = () => {
  const input = createRef<HTMLInputElement>()

  const handle = () => {
    if (input.current) {
      input.current.focus()
    }
  }

  return (
    <div>
      <input ref={input} />
      <button onClick={handle}>focus</button>
    </div>
  )
}
  • useRef 实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const HomePage = () => {
  const input = useRef<HTMLInputElement | null>(null)

  const handle = () => {
    if (input.current) {
      input.current.focus()
    }
  }

  return (
    <div>
      <input ref={input} />
      <button onClick={handle}>focus</button>
    </div>
  )
}

两者的区别在于：createRef 每次渲染会返回一个新的引用，而 useRef 返回的是相同的引用（persist）。对于函数式组件，每次 useState 会造成整个组件的重新渲染，但是 uesRef 可以保证引用不变，不会触发 re-render。

Read more »