Inferno

Inferno

Inferno是一个快速,类似于React的库,用于在客户端和服务器上构建高性能的用户界面。Inferno故意在组件方面保留与React相同的设计思想:单向数据流和关注点分离。在这些示例中,通过Inferno JSX Babel插件使用JSX,以提供表达Inferno虚拟DOM的简单方法。您不需要使用JSX,它是完全可选的,您可以使用hyperscriptcreateElement(就像React一样。请记住,编译时间优化仅适用于JSX

import { render } from "inferno";

const message = "Hello world";

render(<MyComponent message={message} />, document.getElementById("app"));

Inferno也支持类似React的类组件:

import { render, Component } from "inferno";

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }
  render() {
    return (
      <div>
        <h1>Header!</h1>
        <span>Counter is at: {this.state.counter}</span>
      </div>
    );
  }
}

render(<MyComponent />, document.getElementById("app"));

由于性能是该库的重要方面,因此我们想向您展示如何进一步优化应用程序。在下面的示例中,我们通过使用 JSX$HasVNodeChildren 预定义子形状的编译时间来优化差异过程。然后,我们使用Inferno.createTextVNode创建文本vNode

import { createTextVNode, render, Component } from "inferno";

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }
  render() {
    return (
      <div>
        <h1>Header!</h1>
        <span $HasVNodeChildren>
          {createTextVNode("Counter is at: " + this.state.counter)}
        </span>
      </div>
    );
  }
}

render(<MyComponent />, document.getElementById("app"));
下一页