React 的轻量级替代方案,体积仅有 3kB,并且拥有与 React 相同的 API
function Counter() {
const [value, setValue] = useState(0);
return (
<>
<div>Counter: {value}</div>
<button onClick={() => setValue(value + 1)}>Increment</button>
<button onClick={() => setValue(value - 1)}>Decrement</button>
</>
)
}
Run in REPLProudly sponsored by:
与众不同的软件库
离 DOM 更近
Preact 在 DOM 上实现了一个最薄的虚拟 DOM 抽象层。 Preact 构建再稳定的平台特性之上,注册真正的事件处理程序,并于其它库配合良好。
Preact 可以直接再浏览器中使用,无需任何转换步骤。can be used directly in the browser without any transpilation steps.
体积小
大多数 UI 框架的体积是相当大的,占用了 JavaScript 应用程序的大部分体积。 Preact 不同:它足够小,你的代码 才是你的应用程序的主要构成部分。
这意味着下载更少的 JavaScript 代码,解析和执行也会更快 - 为你的代码节省更多时间,因此你可以按照你的定义实现用户体现,而无须受框架的控制。
性能高
Preact 运行速度快并不仅仅是因为它的体积小。Preact 拥有一个简单和可预测的 diff 实现,使它成为最快的虚拟 DOM 库之一。
我们通过批量更新把 Preact 的性能调整到极致。我们与浏览器工程师密切合作,以便尽可能让 Preact 达到最高性能。
轻量 & 可嵌入
Preact 是轻量的,这意味着你可以将强大的虚拟 DOM 组件泛型带到新的地方。
使用 Preact 构建应用程序的各个部分而无须复杂的集成。将 Preact 嵌入到窗口小部件中并应用相同的工具或技术,你将可以构建一个完整的应用程序。
生产效率
轻量可以让你在不需要牺牲生产力的前提下得到更多的乐趣。Preact 让你立即释放生产力。它甚至还有一些额外的功能:
props
、state
和context
可以被传递给render()
- 可以使用标准的 HTML 属性,例如
class
和for
生态系统兼容
虚拟 DOM 组件让重用变得容易 - 从按钮到数据提供器都适用。 Preact 的设计意味着你可以无缝使用 React 生态系统中的数以千计的组件。
通过在你的代码包中添加一个简单的 preact/compat 别名,从而提供了一个兼容层,你甚至就可以在你的应用程序中使用复杂的 React 组件了。
实践出真知!
Todo List
export default class TodoList extends Component {
state = { todos: [], text: '' };
setText = e => {
this.setState({ text: e.target.value });
};
addTodo = () => {
let { todos, text } = this.state;
todos = todos.concat({ text });
this.setState({ todos, text: '' });
};
render({ }, { todos, text }) {
return (
<form onSubmit={this.addTodo} action="javascript:">
<label>
<span>Add Todo</span>
<input value={text} onInput={this.setText} />
</label>
<button type="submit">Add</button>
<ul>
{ todos.map( todo => (
<li>{todo.text}</li>
)) }
</ul>
</form>
);
}
}
Run in REPL运行示例
import TodoList from './todo-list';
获取 GitHub 星标数
export default class Stars extends Component {
async componentDidMount() {
let stars = await githubStars(this.props.repo);
this.setState({ stars });
}
render({ repo }, { stars=0 }) {
let url = `https://github.com/${repo}`;
return (
<a href={url} class="stars">
⭐️ {stars} Stars
</a>
);
}
}
Run in REPL准备入坑了吗?
我们根据你是否有 React 开发经验提供了不同的指南。
选择最适合你的吧!