React再レンダリングガイド: 一度に全て理解する - Qiita
この記事は 『React re-renders guide: everything, all at once』 の翻訳記事です。 ご本人( Nadia Makarevich さん)に許可をいただいて翻訳しています。 以下、翻訳記事となります。 React再レンダリングガイド: 一度に全て理解する Reactの再レンダリングを詳細に網羅したガイドです。 このガイドでは、次の内容を説明します。 再レンダリングとは何か？ 必要な再レンダリングと不要な再レンダリングとは何か？ 何がReactコンポーネントの再レンダリングをトリガーするのか？ また、以下の内容を含みます。 再レンダリングを防ぐための最も重要なパターン 不要な再レンダリングと、パフォーマンスの低下につながるアンチパターン すべてのパターンとアンチパターンには、図とコード例が付いています。 この記事のいくつかの章は動画でも見ることができ
» React: そのrender()はいつ呼ばれるのか TECHSCORE BLOG
これは TECHSCORE Advent Calendar 2018 の２日目の記事です。 React で無邪気に開発をしていると、やたらと render() が呼ばれるのが気になります。 PureComponent を使うと render() の呼び出しを少なくできることは、なんとなく知ってはいるのですが、そもそもどういう場合に render() が呼ばれるのか、 State や Context、 はたまた Redux を使ったときに render() の呼ばれるタイミングがそれぞれどう違うのか、いまいちよくわかっていません。いろいろたっぷり試してみました。 目次 準備 State Vanilla State PureComponent Props に Allow Function を直接渡す Context Vanilla Context PureComponent 独自の Provi
【MUI (Material UI)】 それ、中に Typography を書かなくてもいいですよ ―― 継承とコンポジションを添えて - Qiita
Material UI (@mui/material) には、 Typography というコンポーネントがあり、これを使うことでデザインシステムで定義された文字スタイルを当てることができます。 ところで、Material UI のさまざまなコンポーネントに、 Typography コンポーネントを中に明示的に書かなくても同じ方法でスタイルを当てる機能があることをご存知ですか？ Material UI のコンポーネントは、継承・コンポジションによって、他のコンポーネントの機能を利用する実装になっているモノが多くあります。 そのようなコンポーネントを使うときには、中に Typography を追加で書く必要がありません。
MUI v5 Theme ～基本の使い方からカスタマイズまで～
Vite + React + TypeScript 環境で MUI v5 を使用しています。 今回は MUI v5 の Theme についてTips的にまとめてみました。 テーマをアプリケーション全体に適用する Light モードと Dark モードを切り替える テーマの色を変更する テーマを一部のコンポーネントに適用する 適用されているテーマの一部を変更したテーマを作成し、一部のコンポーネントに適用する テーマに欧文フォント・日本語フォントを追加する テーマに独自のカラーキーワードを追加し、ボタンで使用する Themeの基本 デフォルトテーマ MUI には Light モード用のデフォルトテーマと Dark モード用のデフォルトテーマが用意されています。 それぞれのテーマに設定されている値などは 公式: Default Theme で確認できます。 テーマをアプリケーション全体に適用する
useCallbackは、本当にパフォーマンスを向上させる？
始め すべての始まりは「When to useMemo and useCallback」という記事でした。これを見て「あれ？useCallbackってパフォーマンス向上するやつじゃなかったの？」混乱し、いろいろリサーチしたので、整理したいと思います。 1. 基礎知識 Reactコンポーネントは自分のstateが変更された場合、渡されるpropsが変更された場合に再レンダリングされる。 親コンポーネントが再レンダリングされると子コンポーネントも一緒に再レンダリングされる。この時子コンポーネントが最適化されていなかったら、親から渡されるpropsに変更がなくても基本的に再レンダリングされる。 コンポーネントが再レンダリングされると、その中で宣言されている関数や変数は以前保存されていたメモリを空けて新しいメモリに再び保存される(garbage collection)。 2. useCallbac
結局、Reactとは何なのか | 株式会社こまり
皆様どうも、こんにちは！ こまりのソフトウェアエンジニア、桑木です。 一般的にReactと呼ばれている技術は、いくつかのアイデアとそれを実装したいくつかのライブラリ等によって構成されています。 今回はReact初学者に向けて、Reactが実現している技術的なアイデアについてぼちぼち書いていこうと思います。 コード例 内部的な話をする前に次のコードを見てください。かなり単純なReactの例です。実際はこのコードを変換(コンパイル、トランスパイル)する必要があるので、このコードがそのまま実行されるわけではありませんが、ここでは雰囲気だけ掴んでください。 import * as React from 'react'; import ReactDOM from 'react-dom'; const root = document.getElementById('root'); ReactDOM.r
React今昔物語 - ICS MEDIA
機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜 ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜 クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん
React の最上位 API – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方が学べます。 react: コンポーネント react: フック react: API react: レガシー API React は React ライブラリのエントリポイントです。<script> タグから React を読み込む場合、これらの最上位 API をグローバルの React から利用できます。npm と ES6 を使う場合、import React from 'react' と書けます。npm と ES5 を使う場合、var React = require('react') と書けます。 概要 コンポーネント React コンポーネントを使用すると UI を独立した再利用可能な部分に分割
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
const Hoge: React.FC<Props>=()=>って書いてたら思考停止系と言われたので調べた