Solidjs対反応:私は両方のライブラリ上で同じアプリを構築した.

Solidjsは最近反応の密接な関係を持っているために人気の多くを得ている.これは、フック、JSX、ContextAPI、ポータル、エラーの境界のような反応、USENTとUseeffectのような宣言的な性質を持っています.そしてそれはさらに良くなるソリッドは実行に関してずっと速くて、より小さい束サイズを持ちます.それは仮想DOMの負担を運んでいないので、SolidJjsは実際のDOMを使用することを意味します.あなたの状態が変化すると、Solidjsはそれに依存するコードのみを更新します.
私は、最小限の依存関係、フェッチ要求のためのaxiosとスタイリングのためのTarwindCSSと同じアプリを構築しました.両方のライブラリのコアAPIの類似性のおかげで.このアプリを作成する前に、私はまだ固体を試してみる機会がなかった.だから、私はまるで私が反応を使用しているアプリを構築しました.注意してください、この記事は反応を教えることを目的としません、あるいは、固体は両方のライブラリの違いと類似点を指摘しようとします.始めましょう.
SolidJS App Github Link
ReactJS App Github Link

反応する

const fetchEpisodes = async (optionalUrl?: string) =>
  axios.get<EpisodeResponse>(optionalUrl ?? 'https://rickandmortyapi.com/api/episode');

const App: FC = () => {
  const [episodes, setEpisodes] = useState<EpisodeResponse>();
  const [ref, inView] = useInView({ triggerOnce: true });

  const fetchMoreEpisodes = async () => {
    //Fetching episodes with axios
  };

  useEffect(() => {
    if (inView === true) fetchMoreEpisodes();
  }, [fetchMoreEpisodes, inView]);

  useEffect(() => {
    fetchEpisodes().then((res) => setEpisodes(res.data));
  }, []);

  return (
    <div className="flex justify-center items-center flex-col p-10">
      <h2 className=" font-medium text-4xl my-5">Rick and Morty</h2>
      <div style={{ width: '1000px' }}>
        {episodes?.results.map((episode, index) => (
          <EpisodeWrapper
            episode={episode}
            key={episode.name}
            viewRef={index === episodes.results.length - 1 ? ref : undefined}
          />
        ))}
      </div>
    </div>
  );
};

export default App;

ソリッド

const fetchEpisodes = async (optionalUrl?: string) =>
  axios.get<EpisodeResponse>(optionalUrl ?? 'https://rickandmortyapi.com/api/episode');

const App: Component = () => {
  const [episodes, setEpisodes] = createSignal<EpisodeResponse>();

  const fetchMoreImages = async () => {
    //Fetching episodes with axios
  };

  const handleScroll = () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
      fetchMoreImages();
    }
  };

  createEffect(() => {
    window.addEventListener('scroll', handleScroll);
  });

  onMount(async () => {
    setEpisodes((await fetchEpisodes()).data);
  });

  onCleanup(async () => {
    window.removeEventListener('scroll', handleScroll);
  });

  return (
    <div class="flex justify-center items-center flex-col p-10">
      <h2 class=" font-medium text-4xl my-5">Rick and Morty</h2>
      <div style={{ width: '1000px' }}>
        <For each={episodes()?.results} fallback={<p>Loading...</p>}>
          {(episode) => (
            <div>
              <EpisodeWrapper episode={episode} />
            </div>
          )}
        </For>
      </div>
    </div>
  );
};

export default App;

いくつかの構文上の違いは別として、彼らはほとんど同じです.ソリッドではUSENTフックの代わりにUSESIGNERフックを使用します.これらのフックの間の唯一の違いは、私たちは直接呼び出すことができますepisodes , しかし、usesignalでは、関数のようにそれを呼び出しなければなりません.我々がtypescriptを使用しているならば、我々が反応するように、我々は我々の信号に一般的なタイプを与えることができます.
反応で、我々は我々のAPIを呼び出しますuseEffect 州のために内部データを供給する.しかし、ソリッドでは、ライフサイクルメソッドを呼び出すことができますonMount または、溝ができます.onMount 使用createResource hook . このフックはカスタムフェッチのように働きます- usefetch -関数を受け取り、約束、読み込み、エラーステータスを返します.しかし、楽に
一緒に行きますonMount .
固体で副作用を扱うために、我々はフックと呼ばれていますcreateEffect この特定のフックはuseEffect しかし、それは若干の風変わりがあります.手動で依存関係を取る代わりに
それは自動的に変更を引き起こす内部の状態に自分自身をバインドします.例:

function Counter() {
  const [count, setCount] = createSignal(0);
  const increment = () => setCount(count() + 1);

  createEffect(() => {
    console.log(count()); // Logs count every time it changes
  });
  return (
    <button type="button" onClick={increment}>
      {count()}
    </button>
  );
}

オリジナルの例に戻る.だから、我々は実行したいhandleScroll 毎回人のスクロール.作成するcreateEffect そして、我々のイベントリスナーを呼び出します.それです.返される部分については、一般的には、マップを使用して状態を反復処理しますが、オプションとして組み込まれていますFor . それは実際に受信するコンポーネントですeach 我々の場合ではepisodes 状態とfallback ロードまたは何かを表示するオプション.そして、良い部分は、それが自動的にあなたのためにそれを処理固体のキーに対処する必要はありません.
ところで、あなたがプロップを渡すように小道具を渡すことができますすべての反応で小道具はすべて同じです.

ベンチマーク
ベンチマーク基準は、ChromeのDevツールと最終的なバンドルサイズのパフォーマンスプロファイリングです.パフォーマンスプロファイリングから始めましょう.パフォーマンスタブには、4つのカテゴリにCPUアクティビティの全体的なブレークダウンが表示されます.

ネットワークリクエストの作成と解析

スクリプティング: JavaScriptコードのパース、コンパイル、実行、ガベージコレクション(GC)も含みます

レンダリング:スタイルとレイアウト計算

絵:絵画、合成、リサイズと復号画像

左側は反応し、右は固体である.スクリプトの部分を見ることができますほぼ3倍速く、ほぼ2倍高速レンダリング、ペインティング部分は異常に高速です.
我々がスクリプト部分の上で深いレベルを下ったならば、我々は理由を見ます.

反応する


ソリッド

最初に反応すると、DOMにVDOMを評価してコミットする関数呼び出しを行い、XHR呼び出しを行います.ソリッドはDOMにVDOMを扱う必要はありませんので、その部分をスキップしてすぐにリクエストを開始します.ところで、あなたがどのような機能呼び出しとXHRロードについて疑問に思うならば、あなたはこのサイトをチェックすることができることを意味しますEvent References .
アプリのバンドルのサイズ:

反応する


ソリッド


結論
Solidjsは間違いなくいくつかのことを行うか、おそらくよりも物事のほとんどを行うが、私の謙虚な意見では、固体の最大の問題は、生態系です.反応は、すべてのための成分、フック、パターンを持っている熱烈な生態系を持っています.何かを考えて、NPMでそのものを説いてみてください、そして、私はあなたがあなたのニーズに関して何かを見つけると賭けます.今すぐソリッドの販売ポイントは高速です.ベンチマークで
バニラJSにかなり近い.
それはバニラJSに近いです、しかし、我々はここで重要なものを逃しています.人々は速く反応していないので、人々は反応していません、そして、人々はそれさえ知らない.しかし、私はSolidjsが明るい将来を持っていると信じています、そして、コミュニティがより大きくてより大きくなるように、それはさらによりよくなります.
SolidJS App Github Link
ReactJS App Github Link