React 用のマルチターミナル統合フレームワークとは何ですか?

反応マルチターミナル統合フレームワークには次のものが含まれます: 1. Hippy フレームワークと Taro フレームワーク. Hippy は Tencent QQ ブラウザ部門によって開始されたオープンソースのクロスターミナル フレームワークであり、React と Vue を同時にサポートします。 Aoyu Lab が作成したフレームワークで、React の構文仕様に準拠したマルチターミナル統合開発フレームワークです。

React マルチターミナル統合フレームワーク:

Tencent クロスターミナルフレームワーク - Hippy

現在のスター: 4.5k

Github: https://github.com/Tencent/Hippy

オープンソースのクロスエンド フレームワークが開始されましたTencent QQ ブラウザ部門 Hippy による。 Tencent 内では、Hippy は 3 年間運営されており、BG 全体で合計 18 のオンライン ビジネスが Hippy を使用しており、1 日の平均 PV は 1 億を超え、完全なエコシステムが確立されています。他のクロスエンド フレームワークと比較して、Hippy はフロントエンド開発者にとってよりフレンドリーです。W3C 標準に厳密に準拠し、Web 開発のさまざまなルールに準拠し、開発言語として JavaScript を使用し、フロントエンドの 2 つの主流である React と Vue の両方をサポートします。 - フレームワーク終了。

Hippy は、Flutter (React Native のファブリック アーキテクチャ) に似たエンジン パススルー アーキテクチャを実装しています。C で開発されたモジュールは、JS エンジンに直接挿入されて実行され、フロント ターミナル通信のエンコードとデコードのオーバーヘッドをバイパスします。 、効果的に向上 JS フロントエンド コードと端末間の通信パフォーマンスが向上しました。これに基づいて、Hippy はより強力なパフォーマンスとより良いユーザー エクスペリエンスを提供するために、高性能の自己描画を実装しています。

Hippy-react は構文的にターミナルの最下層に近く、ある程度は React Native に近い構文ですが、同時に、公式の hippy-react-web コンポーネント ライブラリを通じて、 Webページも簡単に生成できます。

特徴:

• 従来の Web フロントエンド向けに設計されており、2 つの主流フロントエンド フレームワークである React と Vue を正式にサポートしています。

• 異なるプラットフォームでも同じインターフェイスが維持されます。

• フロントターミナル通信は、JS エンジン バインディング モードを通じて実装されます。

• 高パフォーマンスの再利用可能なリストを提供します。

• は Web ブラウザにスムーズに移行できます。

• Flex レイアウト エンジンを完全にサポートします。

Jingdong クロスエンド フレームワーク - Taro

現在のスター: 24.5k

GitHub: http://github. com /nervjs/taro

Taro は、JD.com - Aolu Lab によって作成された、React 構文仕様に準拠したマルチターミナル統合開発フレームワークです。

コードのセットは、Taro のコンパイル ツールを通じて、ソース コードをさまざまな端末 (WeChat アプレット、H5、アプリ ターミナルなど) で実行できるコードに個別にコンパイルします。 ）。同時に、Taro はすぐに使用できる構文検出機能と自動補完機能も提供し、開発エクスペリエンスと効率を効果的に向上させます。

WeChat 独自のミニ プログラム フレームワークとは異なり、Taro は、次のようなコミュニティの既存の最新の開発プロセスを積極的に採用しています。

• NPM パッケージ管理システム

• ES6 構文

• 無料リソース リファレンス

• CSS プリプロセッサおよびポストプロセッサ (SCSS、Less、PostCSS)

WeChat アプレットのコンパイル処理において、Taro は Parcel からインスピレーションを受け、AST を継続的に転送するための独自開発のパッケージ化メカニズムを開発したため、コード解析速度が大幅に向上しました。 2015 15 インチ RMBP では、数百のコンポーネントをコンパイルするのにわずか約 15 秒しかかかりません。

Taro では、App コンポーネント、Page コンポーネント、ミニ プログラムのような Component コンポーネントを区別する必要はありません。Taro はすべて Component コンポーネントであり、それらは完全に一貫しています。 React のライフサイクルに合わせて。 React をマスターすれば、Taro もほぼマスターしたと言えるでしょう。宣言的な JSX 構文も使用します。文字列テンプレート構文と比較して、JSX は繊細で複雑な要件をより快適に処理できます。

// 一个典型的 Taro 组件
import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
export default class Homeextends Component{
  constructor (props) {
    super(props)
    this.state = {
      title: '首页',
      list: [1, 2, 3]
    }
  }
  componentWillMount () {}
  componentDidMount () {}
  componentWillUpdate (nextProps, nextState) {}
  componentDidUpdate (prevProps, prevState) {}
  shouldComponentUpdate (nextProps, nextState) {
    return true
  }
  add = (e) => {
    // dosth
  }
  render () {
    const { list, title } = this.state
    return (
      <ViewclassName=&#39;index&#39;>
        <ViewclassName=&#39;title&#39;>{title}</View>
        <ViewclassName=&#39;content&#39;>
          {list.map(item => {
            return (
              <ViewclassName=&#39;item&#39;>{item}</View>
            )
          })}
          <ButtonclassName=&#39;add&#39;onClick={this.add}>添加</Button>
        </View>
      </View>
    )
  }
}

プログラミング関連の知識について詳しくは、

プログラミング入門をご覧ください。 ！

以上がReact 用のマルチターミナル統合フレームワークとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。