小编Dan*_*iel的帖子

有两个可用于在渲染时添加内容的助手：

  ...

  const DisplayA = () => <div className={'containerA'}>
    <button onClick={handleToggleA}>{"A toggled: " + toggledA.toString()}</button>
  </div>

  const displayB = () => <div className={'containerB'}>
    <button onClick={handleToggleB}>{"B toggled: " + toggledB.toString()}</button>
  </div>

  return (
    <>
      <DisplayA />
      { displayB() }
    </>
  );

  ...

问题在于，在第一个帮助程序中，React总是丢弃整个子树，然后从头开始再次创建它，如下面所示：

演示

我知道，第一种方法是React.createElement的语法糖，因此每个渲染都会创建一个新组件。但是，第二种方式是，每个渲染也创建一个独特的箭头函数。

1. 为什么React不知道如何以第一种方式重用子树，但是知道第二种方式？幕后发生了什么？

2. 我们如何发现DOM子树何时被丢弃并在每个渲染中重新创建？假设不应该创建内联组件并且仅使用内联函数就足够了吗？

注意，助手可以来自道具，例如（渲染道具模式）。

我正在尝试使用 React、关键帧、CSS 模块（和 SASS）来制作一个简单的动画。问题在于 CSS 模块散列关键帧名称的方式与散列本地类的方式相同。

JS代码

//...

export default () => {
  const [active, setActive] = useState(false);
  return(
    <div className={active ? 'active' : 'inactive'}
      onClick={() => setActive(!active)}
    >content</div>
  )
}

尝试使所有内容都全局化，将此源用作教程（不编译）：

//default scope is local

@keyframes :global(animateIn) {
  0% { background: black; }
  100% { background: orange; }
}

@keyframes :global(animatOut) {
  0% { background: orange; }
  100% { background: black; }
}

:global {
  .active {
    background: orange;

    animation-name: animateIn;
    animation-duration: 1s;
  }

  .inactive {
    background: …

有一个非常相似的问题，但是文档中提到的静态端和实例端没有直接答案。

正如我依稀理解的那样，静态端是构造函数，实例端是其他一切？

打字稿文档中的一个示例：

interface ClockConstructor {
    new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface {
    tick(): void;
}

function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
    return new ctor(hour, minute);
}

class DigitalClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("beep beep");
    }
}
class AnalogClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("tick tock");
    }
}

let digital …