Preact

Preact，它是React的3KB轻量替代方案，拥有同样的ES6 API。高性能，轻量，即时生产是Preact关注的核心。基于这些主题，Preact关注于React的核心功能，实现了一套简单可预测的diff算法使它成为最快的虚拟DOM框架之一，同时preact-compat为兼容性提供了保证，使得Preact可以无缝对接React生态中的大量组件，同时也补充了很多Preact没有实现的功能。

工作流程

简单介绍了Preact的前生今世以后，接下来说下Preact的工作流程，主要包含五个模块：component、h函数、render、diff算法、回收机制。首先是我们定义好的组件，在渲染开始的时候，首先会进入h函数生成对应的virtual node（如果是JSX编写，之前还需要一步转码）。每一个vnode中包含自身节点的信息，以及子节点的信息，由此而连结成为一棵virtual dom树。基于生成的vnode，render模块会结合当前dom树的情况进行流程控制，并为后续的diff操作做一些准备工作。

Preact的diff算法实现有别于react基于双virtual dom树的思路，Preact只维持一棵新的virtual dom树，diff过程中会基于dom树还原出旧的virtual dom树，再将两者进行比较，并在比较过程中实时对dom树进行patch操作，最终生成新的dom树。与此同时，diff过程中被卸载的组件和节点不会被直接删除，而是被分别放入回收池中缓存，当再次有同类型的组件或节点被构建时，可以在回收池中找到同名元素进行改造，避免从零构建的开销。

快速开始

import { h, render, Component } from "preact";

class Clock extends Component {
  state = { time: Date.now() };

  // Called whenever our component is created
  componentDidMount() {
    // update time every second
    this.timer = setInterval(() => {
      this.setState({ time: Date.now() });
    }, 1000);
  }

  // Called just before our component will be destroyed
  componentWillUnmount() {
    // stop when not renderable
    clearInterval(this.timer);
  }

  render() {
    let time = new Date(this.state.time).toLocaleTimeString();
    return <span>{time}</span>;
  }
}

render(<Clock />, document.body);

Links

— https://www.axihe.com/react/preact/home.html#linkstate Preact学习笔记