[B! React] naga_sawaのブックマーク

useEffect完全ガイド

あなたは Hooks を使って複数のコンポーネントを書きました。ちょっとしたアプリも作ったことがあるでしょう。満足もしている。API にも慣れて、その過程でコツも掴んできました。しかも重複したロジックを転用できるよう Custom Hooks を作り、同僚に自慢して見たり。でも useEffect を使う度、いまいちピンときません。class のライフサイクルとは似ているけど、何かが違う。そしていろんな疑問を抱き始めます。 🤔 componentDidMount を useEffect で再現する方法は？ 🤔 useEffect 内で正確に非同期処理を行う方法とは？　[]ってなに？ 🤔 関数をエフェクトの依存関係として記すべき？ 🤔 非同期処理の無限ループがたまに起こるのはなぜ？ 🤔 古い state か props がエフェクト内にたまに入るのはなぜ？私も Hooks を使

naga_sawa 2020/07/05

useEffect のあれこれ/JavaScrpitのキャプチャの挙動を把握していないと地雷ふみそう

リンク

ゆ、useEffectちゃん!初回に動かないで! - Qiita

TL;DR よいしょ……よいしょ…… useEffect便利ですよね。 stateの変化を監視し、そのstateの変化に伴うべき処理の流れを一元管理できます。 import React, { useState, useEffect } from 'react' import ReactDOM from 'react-dom' function Counter(props) { const [count, setCount] = useState(0) const [lastUpdatedAt, setLastUpdatedAt] = useState(null) useEffect(() => {// 『count』が更新された際に、それに伴い必ず実行される setLastUpdatedAt(new Date().toString()) }, [count]) return ( <div

naga_sawa 2020/07/05

useEffectで初回の実行を回避する

リンク

React 触り始め、よく遭遇する問題まとめ（個人的に）

Reactの初歩的エラー集コンポーネントのreturnする際に、複数のタグを返してしまいエラー Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>? const HogeConponent = () => { // これはエラー return( <h1>タイトル</h1> <p>こんにちは</p> ) }

naga_sawa 2020/07/05

Reactあるあるエラー集

リンク

Reactのべからず集 - Qiita

Reactは便利なライブラリですが、ライブラリの想定を外れる使い方をするとうまく動かないとか、進化が続いているのですでに古くなってしまった書き方とかが存在します。ここでは、そのような、Reactでやるべきでない書き方についてまとめてみました。 ★★★★ この﹁★★★★﹂は、﹁守らないと正常動作しなくなる﹂レベルのものについて扱います。 JSXを使うファイルでReactを用意し忘れる JSXはReact.createElementに変換されますので、直接アクセスしているように見えなくても、名前空間内にReactが必要です。eslint react/react-in-jsx-scope コンポーネント内部からpropを書き換えるあくまでpropsは親から子へ渡されるものなので、子の側で書き換えることはReactの枠組みの想定外となります。 setState以外の手段でstateを書き換え

naga_sawa 2020/07/05

Reactべからず集

リンク

Reactのchildren探訪 - Qiita

ReactのJSXでも子要素を定義できますが、これが結構面白いものでした。自作エレメントにも子要素 ReactのJSXでは、︵DOMを組み立てるものである以上当然ですが︶<div>の中に<a>を書いて、そしてさらに文字列を書き込む、ということが可能です。そして、これはHTML由来のエレメントだけでなく、自作のコンポーネントでも実現可能です。 function SomeWrapper({children}) { return( <div className="some-class"> { children } </div> ); } このように、子要素はchildrenというPropとして渡ってきます。 childrenの中身が知りたくてでは、このchildrenには何がどのような形式で来るのでしょうか。JSXの変換先であるReact.createElementのソースコードに当たって

naga_sawa 2020/07/05

ript][tips] React.createElement の children は props.children に入ってコンポーネントに渡される/コンポーネント側で Comp = ({children, ...props}) => {} のようにして分離するのがベター？

リンク

How to Render a Component Dynamically Based on a JSON Config

naga_sawa 2020/07/05

JSONベースで動的にエレメント生成

リンク

How to render dynamic component defined in JSON using React | Storyblok

naga_sawa 2020/07/05

JSONベースで動的にエレメント生成

リンク

React.useEffectで非同期処理をする場合の注意点2つ（変更あり） - Qiita

はじめに React 16.8から導入されたhooksにはuseEffectがあります。詳細は公式サイトをまず参照しましょう。 useEffectを使うと、コンポーネントのレンダリングとは別に処理を書くことができます。useEffectでしばしば非同期処理を書くことがあります。例えば、サーバからのデータ取得の処理などがあります。以下では、useEffectで非同期処理を書く場合の注意点を2つ紹介します。ケースによっては注意点はこの2つだけではない可能性が高いので、ご留意ください。 promiseを返さない useEffectに渡す関数の戻り値はcleanup関数です。 useEffect(() => { console.log('side effect!'); const cleanup = () => { console.log('cleanup!'); }; return clea

naga_sawa 2020/07/04

useEffect で不用意に async すると暗黙の return Primise になるので注意/『It looks like you wrote useEffect(async () => ...) or returned a Promise』と親切な Warning 出してくれる

リンク

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はほとん

naga_sawa 2020/05/24

Reactの変遷

リンク

はてなブックマーク

タグ

関連タグで絞り込む (5)

Reactに関するnaga_sawaのブックマーク (9)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス