使用Preact作为React替代品

最新推荐文章于 2024-05-16 09:30:23 发布

dingshi7798

最新推荐文章于 2024-05-16 09:30:23 发布

阅读量577

点赞数

文章标签： vue java python react javascript ViewUI

原文链接：https://www.sitepoint.com/using-preact-react-alternative/

版权

就像React和许多其他类似的库一样， Preact是虚拟DOM组件范例的实现。 与React不同，它只有3KB的大小，并且在速度方面也胜过它。 它是由杰森·米勒（Jason Miller）创建的，并以著名的宽松和开源MIT许可证提供。

为什么要使用Preact？

徽标徽标 Preact是React的轻量级版本。如果您喜欢使用React构建视图，但是性能，速度和大小是您的首要任务，例如移动Web应用程序或渐进式Web应用程序，则您可能更喜欢使用Preact作为轻量级替代方案。

无论您是开始一个新项目还是开发一个现有项目，Preact都可以为您节省大量时间。你并不需要推倒重来努力学习新的图书馆，因为它类似，和兼容，作出React-到如此地步，可以使用现有的React封装，它只有一些混淆，多亏了兼容层preact-compat 。

利弊

React和Preact之间有很多区别，我们可以概括为三点：

功能和API ：Preact仅包括React API的一个子集，而不是React中所有可用的功能。
大小：Preact比React小得多。
性能：Preact比React快。

那里的每个图书馆都有自己的优缺点，只有优先考虑才能帮助您确定哪个图书馆适合您的下一个项目。在本节中，我将尝试列出这两个库的优缺点。

事前优点

Preact比React轻巧，小巧（压缩后只有3KB）并且比React快（请参阅这些测试）。您也可以通过此链接在浏览器中运行性能测试。
Preact在很大程度上与React兼容，并且具有与React相同的ES6 API，这使得采用Preact作为用于在项目中构建用户界面的新库或出于性能原因将React与Preact交换而变得非常容易。
它具有良好的文档和可从官方网站上获得的示例。
它具有功能强大且正式的CLI，可快速创建新的Preact项目，而无需担心Webpack和Babel的配置。
许多功能都受React上已经完成的所有工作的启发。
它还具有独立于React的自己的高级功能集，例如Linked State 。

React专家

React支持单向数据绑定。
它得到了一家大型公司Facebook的支持。
官方网站和网络上的优质文档，示例和教程。
大型社区。
在Facebook网站上使用，该网站在全球拥有数百万的访问者。
具有针对Chrome的官方开发人员调试工具扩展程序。
它具有Create React App项目样板，可快速创建零配置的项目。
它具有结构良好且复杂的代码库。

React缺点

与Preact或其他现有的类似库相比，React具有相对较大的大小。（React后的缩小的源文件大小约为136KB，缩小并压缩后约为42KB。）
它比Preact慢。
由于其复杂的代码库，新手开发人员很难做出贡献。

注意：我在撰写本文时列出的另一个缺点是，React具有与BSD许可证配对的授权专利条款，使其在法律上不适合某些用例。 但是，在2017年9月，React许可证转换为MIT，从而解决了这些许可证问题。

预设缺点

Preact仅支持无状态功能组件和基于ES6类的组件定义，因此没有createClass 。
不支持上下文。
不支持React propTypes。
比React更小的社区。

Preact CLI入门

Preact CLI是Preact的作者Jason Miller创建的命令行工具。它使创建新的Preact项目非常容易，而又不会陷入配置复杂性的困扰，所以让我们从安装它开始。

打开终端（Linux或macOS）或命令提示符（Windows），然后运行以下命令：

npm i -g preact-cli@latest

假设您在本地开发计算机上安装了Node和NPM ，它将安装Preact CLI的最新版本。

现在，您可以使用以下命令创建项目：

preact create my-app

或与此相关的东西，如果您想以交互方式创建您的应用程序：

preact init

接下来，在应用程序的根文件夹中导航并运行以下命令：

npm start

这将启动实时重载开发服务器。

最后，当您完成应用程序的开发时，可以使用以下代码构建生产版本：

npm run build

为您的第一个Preact应用揭秘

成功安装Preact CLI并生成应用后，让我们尝试了解使用Preact CLI生成的简单应用。

Preact CLI生成以下目录结构

├── node_modules
├── package.json
├── package-lock.json
└── src
    ├── assets
    ├── components
    │   ├── app.js
    │   └── header
    ├── index.js
    ├── lib
    ├── manifest.json
    ├── routes
    │   ├── home
    │   └── profile
    └── style
        └── index.css

components文件夹包含Preact组件，而routes文件夹包含用于每个应用程序路由的页面组件。您可以将lib文件夹用于任何外部库，将CSS样式的style文件夹，以及用于图标和其他图形的assets使用。

请注意manifest.json文件，该文件类似于package.json但适用于PWA（渐进式Web应用程序）。借助Preact CLI，您可以立即获得完美得分的PWA。

现在，如果打开项目的package.json文件，您将看到主入口点设置为src/index.js 。这是此文件的内容：

import './style';
import App from './components/app';

export default App;

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

如您所见， index.js从./components/app**导入样式和App组件，然后将其默认导出。

现在，让我们看看./components/app里面的./components/app ：

import { h, Component } from 'preact';
import { Router } from 'preact-router';

import Header from './header';
import Home from '../routes/home';
import Profile from '../routes/profile';

export default class App extends Component {
    handleRoute = e => {
        this.currentUrl = e.url;
    };

    render() {
        return (
            <div id="app">
                <Header />
                <Router onChange={this.handleRoute}>
                    <Home path="/" />
                    <Profile path="/profile/" user="me" />
                    <Profile path="/profile/:user" />
                </Router>
            </div>
        );
    }
}

该文件导出默认类App ，该类扩展了从preact包中导入的Component类。每个Preact组件都需要扩展Component类。

App定义了render方法，该方法返回一堆HTML元素和Preact组件，以渲染应用程序的主用户界面。

在div元素内部，我们有两个Preact组件： Header （呈现应用程序的标头）和Router组件。

Preact Router与最新版本的React Router（版本4）相似。您只需要用<Router>组件包装子组件，然后为每个组件指定path属性。然后，路由器将负责呈现组件，该组件的路径属性与当前浏览器的URL相匹配。

值得一提的是，Preact Router非常简单，与React Router不同，它不支持嵌套路由和视图组合之类的高级功能。如果需要这些功能，则必须使用别名为preact-compat的React Router v3，或者最好使用比v3更强大且不需要任何兼容性层的最新React Router（版本4）。直接与Preact一起使用。（有关示例，请参见此CodePen演示。）

预先兼容层

preact-compat模块允许开发人员从React切换到Preact，而无需将从React和ReactDOM的导入更改为Preact，或将现有的React软件包与Preact一起使用。

使用preact-compat很容易。您要做的就是首先通过npm安装它：

npm i -S preact preact-compat

然后设置您的构建系统以重定向导入，或将react或react-dom要求重定向到preact-compat 。例如，对于Webpack，您只需要向webpack.config.js添加以下配置：

{
  "resolve": {
    "alias": {
      "react": "preact-compat",
      "react-dom": "preact-compat"
    }
  }
}

结论

Preact是React的不错选择。它的社区正在稳定增长，越来越多的Web应用程序正在使用它。因此，如果您要构建具有高性能要求的Web应用程序，或者为速度较慢的2G网络构建移动应用程序，则应考虑使用Preact-作为您项目的第一个候选视图库，或作为React的直接替代品。

翻译自: https://www.sitepoint.com/using-preact-react-alternative/

dingshi7798

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用Preact作为React替代品

就像React和许多其他类似的库一样， Preact是虚拟DOM组件范例的实现。与React不同，它只有3KB的大小，并且在速度方面也胜过它。它是由杰森·米勒（Jason Miller）创建的，并以著名的宽松和开源MIT许可证提供。为什么要使用Preact？ Preact是React的轻量级版本。如果您喜欢使用React构建视图，但是性能，速度和大小是您的首要任务，例如移动Web...
复制链接

扫一扫