Inferno
Inferno
import { render } from "inferno";
const message = "Hello world";
render(<MyComponent message={message} />, document.getElementById("app"));
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
预定义子形状的编译时间来优化差异过程。然后,我们使用
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"));