Reactのいいなと思ったところ

クラスメソッドのReact事情大公開スペシャル#6
https://classmethod.connpass.com/event/339885/presentation/

Transcript

1. Reactのいいなと思ったところ Natsuki
2. 今日話すこと 普段の業務ではVueを使用していて、最近Reactも業務外で勉強し始めました 初心者の目線で「Reactのココいいな」と思った点を共有したいと思います 自己紹介 Natsuki 普段はLaravel + Vueで開発
3. 宣伝 Reactを学ぶ上で、VSCodeの拡張機能を作ってみました。 Your Themes
4. demo https://github.com/natsuki-engr/your-themes/blob/a1ce518a99009fd5baf489e592958c3c35b5dfcf/img/demo.gif
5. 本題 「Reactのいいなと思ったところ」
6. dangerouslySetInnerHtml タグを含んだ文字列をHTMLタグとしてレンダリングしたい場合の`setInnerHtml`と同じ XSS攻撃の危険性があるので、注意が必要 「危険なんだぞ」という強い警告を感じるところがいい vueだと v-html で同じ実装ができるが、罪悪感が無い const markup = '<p>some raw html</p>'; return <div dangerouslySetInnerHTML={{__html: markup}} />; ` ` <script setup> const markup = '<p>some raw html</p>' </script>
7. 一貫してJS 「JSを知っていれば大体書ける」 たとえばJSX
8. JSX JSXの構成はJSとタグなので、テンプレートのために必要な知識が少ない JSのパラダイム/設計を持ち込める if(items.length === 0) { return <p>empty...</p> } function ItemList({ items: Item[] }) { return ( <ul> {items.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); }
9. レンダリングの更新が分かりやすい 基本的に、引数やステートが変わって再レンダリングされるときに 「全て再計算される」と思っておいて、 ・特定の再計算をスキップしたければ useMemo 配列から値の検索とか ・特定の処理をスキップしたければ useEffect APIの呼び出しとか ` ` ` `
10. useEffect/useMemo の悪い例 不要な useEffect 不要な useMemo https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state ` ` function Form() { const [firstName, setFirstName] = useState('Taylor'); const [lastName, setLastName] = useState('Swift'); const [fullName, setFullName] = useState(''); useEffect(() => { setFullName(firstName + ' ' + lastName); }, [firstName, lastName]); return /** ... */ } ` ` function Form() { const [firstName, setFirstName] = useState("Taylor"); const [lastName, setLastName] = useState("Swift"); const fullName = useMemo( () => firstName + " " + lastName, [firstName, lastName] ); return; /** ... */ } const fullName = firstName + " " + lastName
11. なぜ今日この話をしようと思ったか
12. 参考 【React】誤解される useMemo と 誤用される useState ―― 「A の変更に反応して B の値が変わる」と考え るべきでない https://qiita.com/honey32/items/58e56e407d4d87e294a4 【React】useEffect の標準動作は「依存配列の中身が変わると実行」ではない https://qiita.com/honey32/items/62edf5165aced7d0c4bf useState + useEffect -> 再レンダリング中に毎回計算 (重ければ useMemo) https://scrapbox.io/honey32/useState_+_useEffect_->_再レンダリング中に毎回計算_(重ければ_useMemo) props または state に基づいて state を更新する - そのエフェクトは不要かも https://ja.react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state