函数Counter(){const [value,setValue] = useState(0); return(计数器:{value}递增递减)}
在REPL中运行
Preact在DOM之上提供了最薄的虚拟DOM抽象。它建立在稳定的平台功能之上,可以注册真实的事件处理程序,并且可以与其他库很好地协作。
大多数UI框架都足够大,足以占应用程序JavaScript大小的大部分。 Preact是不同的:它小得足以使代码成为应用程序的最大部分。
这意味着更少的JavaScript可以下载,解析和执行-为代码留出更多时间,因此您可以构建自己定义的体验,而无需努力保持框架的可控性。
精确快速,而不仅仅是因为它的大小。由于简单且可预测的diff实现,它是目前最快的虚拟DOM库之一。
当涉及到性能时,我们会自动批量更新并优化Preact。我们与浏览器工程师紧密合作,以使Preact发挥最大性能。
Preact的占地面积很小,意味着您可以将强大的Virtual DOM Component范式带到其他地方无法使用的新地方。
使用Preact可以构建应用程序的各个部分,而无需复杂的集成。将Preact嵌入到小部件中,并应用与构建完整应用程序相同的工具和技术。
当您不必牺牲生产力来达到该目标时,轻便会有趣得多。 Preact可立即为您带来生产力。它甚至具有一些额外功能:
通过虚拟DOM组件,可以轻松共享可重用的内容-从按钮到数据提供程序的所有内容。 Preact的设计意味着您可以无缝使用React生态系统中可用的数千个组件。
向捆绑程序中添加简单的preact / compat别名即可提供一个兼容性层,该兼容性层甚至可以在您的应用程序中使用最复杂的React组件。
导出默认类扩展{state = {todos:[],text:'' }; setText = e => { 这个 。 setState({文本:e .target .value}); }; addTodo =()=> {让{待办事项,文字} =这个.state; todos =待办事项。 concat({文字});这个 。 setState({todos,text:''}); };渲染({},{todos,text}){返回(添加Todo添加{todos。map(todo =>({todo .text))})); }}
在REPL中运行
导出默认类扩展{异步componentDidMount(){让stars =等待githubStars(这个.props .repo); 这个 。 setState({stars}); } render({repo},{stars = 0}){let url =`https://github.com/ $ {repo}`; 返回(⭐️{stars} Stars); }} 在REPL中运行 根据您是否有使用React的经验,我们有单独的指南。 选择最适合您的指南!