Preact 和 React 渲染无状态组件的区别

Question

我正在使用 Preact，因为我有一个有大小限制的项目。我创建了两个 playground，一个用 Preact，一个用 React。

只需在搜索字段中输入，注意 Preact 和 React 更新的不同之处。 React 在 DOM 节点上重新渲染，Preact 添加到它。

我希望 Preact 表现得像 React。请帮忙

这是有问题的代码，playgrounds 可以看到下面的不同行为

const handleKeyUp = () =>
  render(
    <div key="1">{Math.random()}</div>,
  document.getElementById('random') 
)

const input = () => 
  render(
    <input onKeyUp={handleKeyUp} placeholder="type somthing here"/>,         
    document.getElementById('input')
  )


input()

这里是 React 的游乐场：

https://stackblitz.com/edit/react-yey8js?file=index.js

这是 CodePen 的游乐场：

https://codepen.io/babakness/pen/oEXjPz?editors=1010

Answer 1

我发现了不同之处，Preact 的渲染采用第三个参数，即 DOM 要替换而不是渲染到的节点。

https://github.com/developit/preact/wiki/Differences-to-React#whats-different

Preact 和 React 渲染无状态组件的区别

Difference between Preact and React rendering stateless components

reactjs

preact