使用して、useStateと怠惰な初期化子を[リアクト]

前：

< 身体> 
  < div要素のid = "ルート" > </ divの> 
  < スクリプトSRC = "https://unpkg.com/[email protected]/umd/react.development.js" > </ スクリプト> 
  < スクリプトSRC = "https://unpkg.com/[email protected]/umd/react-dom.development.js" > </ スクリプト> 
  < スクリプトSRC = "https://unpkg.com/@babel/standalone 7.8.3 / babel.js @」> </ スクリプト> 
  < スクリプトタイプ= "テキスト/バベル" >
    機能挨拶（）{ 
      CONST [名前、のsetName]= React.useState（
         window.localStorage.getItem（ '名前'）|| '' 、 
      ） 
      React.useEffect（（）=> { 
        window.localStorage.setItem（' 名称' 、名）
      }）
      CONST handleChange = イベント=> setName（event.target.value）リターン（
         < DIV > < フォーム> < ラベルhtmlFor = " 名前" > 名前：< / label>は<入力値=



      
          
            
            {名前}のonChange = {handleChange} ID = " 名前"  / > 
          < / フォーム> 
          {名前？ < 強い> こんにちは{名前} < / 強い>：} '自分の名前を入力してください。' 
        < / DIV> 
      ）
    } 

    ReactDOM.render（< 挨拶/ >、のdocument.getElementById（ 'ルート'））
  </ スクリプト> 
</ ボディ>

認識することが重要だ何かが毎回あなたが（のような機能アップデータ状態を呼び出すことで setName 、その状態を管理するコンポーネント（再描画トリガすること、私たちのコンポーネント内の関数） Greeting の例ではコンポーネント）。これは、私たちが正確に何である必要が起こる持っているが、それは することができ 、いくつかの状況では問題になると我々が適用することができますいくつかの最適化がある useState ことが問題である場合に、具体的には。

私たちのケースでは、我々はに読んでいる localStorage 最初の私たちのレンダリングのための私達の状態値を初期化する Greeting コンポーネント。しかし、それは最初にレンダリングした後、我々はに読む必要はありません。 localStorage 私たちは今、メモリにその状態を管理しているので、もう（特にその中 name の変数に反応することはレンダリング私たちのそれぞれを提供します）。読み込むので、 localStorage 最初のものは不要になった後、すべてのレンダリング。だから、私たちは機能の代わりに、実際の値を指定することができ、そしてそれが、上のレンダリング最初の必要があるときに、それだけでその関数を呼び出します反応します。

このレッスンでは、私はこれを行うと、それがどのように動作するかを実証する方法を紹介します。

後：

CONST [名前、のsetName] = React.useState（
  （）=> window.localStorage.getItem（ '名前'）|| '' 
）

使用して、useStateと怠惰な初期化子を[リアクト]

おすすめ