DevDino 🦖

我曾七次鄙视自己的灵魂

发表于 本文字数： 304 阅读时长 ≈ 1 分钟

什么是key属性以及为什么React需要它？

如果存在“key”属性，React 使用它作为在重新渲染期间在其兄弟姐妹中识别相同类型元素的一种方式，也就是说，仅在重新渲染期间和相同类型的相邻元素才需要它。

阅读全文 »

发表于 本文字数： 238 阅读时长 ≈ 1 分钟

如果仅仅是用一个变量来保存tiner的ID，会导致无法清除timerID
如下：

const TimerCount = () => {
  let [count,setCount] = useState(0)
  let timer
  const handleStart =() => {
    timer = setInterval(() => {
      setCount(count++)
    },1000)
  }
  const handleEnd = () => {
    clearInterval(timer)
  }
  return (
    <>
    <button onClick={handleStart}>start</button>
    <button onClick={handleEnd}>end</button>
    <div>{count}</div>
    </>
  )
}
阅读全文 »

发表于 本文字数： 1.2k 阅读时长 ≈ 4 分钟

children as a render function

const MovingComponent = ({ children }) => {
  ...
  return (
    <div ...// callbacks same as before
      >
      // children as render function with some data
      // data doesn't depend on the changed state!
      {children({ data: 'something' })}
    </div>
  );
};

const SomeOutsideComponent = () => {
  return (
    <MovingComponent>
      // ChildComponent re-renders when state in MovingComponent changes!
      // even if it doesn't use the data that is passed from it
      {() => <ChildComponent />}
    </MovingComponent>
  )
}
阅读全文 »

发表于 本文字数： 1.3k 阅读时长 ≈ 5 分钟

加载和执行

每个<script>标签初始化下载都会阻塞页面渲染，所以减少页面的<script>标签数量可以起到优化作用，内嵌脚本外链脚本通用,另外HTTP会带来的额外的性能消耗，下载一个100KB的文件比下载4个25KB的文件更快，所以可以通过进行脚本的合并去1、减少<script>标签数量 2、减少HTTP请求带来的消耗（针对外链脚本）。

阅读全文 »