react Hook s全面転換攻略(一)react本編のuseState、useEffect

2841 ワード
javascript react.js ヤフー typescript
use State
古典的なケース:
import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times

      
    

  )
}
この例では、 useState(0)は最新のHOksアプリである.構文:
function useState(initialState: S | (() => S)): [S, Dispatch>];
その中でstateは彼の値で、set Stateは値を設定する関数で、initial Stateは初期値です.
use Statit-intialState
この初期値は任意のパラメータを受け入れることができますが、彼が関数として受け取るとLazy initialization(遅延初期化)になります.この関数の戻り値はinitial Stateです.
const [count, setCount] = useState(0);

const [count, setCount] = useState(()=>0);
//              ,                

const [count, setCount] = useState(()=>{
    console.log('             ')
    // class    constructor            
    return 0
});
//
use Statit-set State
多くの人がclassのset Stateを使う時、彼のコールバック関数をよく使うかもしれませんが、ここでは残念ながら、彼は新しい値しか受け入れられません.もし対応したいなら、useeffectを使ってもいいです.この問題などはジャンプリンクを提供します.
useeffect
構文:
function useEffect(effect: EffectCallback, deps?: DependencyList): void;
古典的なケース:
useEffect(() => {
  console.log('  dep      ,   dep  ,          ')
  return () => {
    console.log('    unmount    ')
  };
});
depsは1つの配列でなければなりませんが、空の配列の場合:
  useEffect(() => {
    console.log('      componentDidMount')
  }, [])
depsがあっても、彼は初期化の時にトリガします.
セットステーションとのコールバック関数:useState-setStateにおいて、classのset Stateには全部リプライがありますが、HookではuseEffectを通じて同様にその効果を実現できます.
コールバック値に関する秘密:
戻り値と言えば、彼は多くの値を受け入れることができますが、彼はどのような値を受け入れられますか?
まず第一に、私たちは、string、number、undefined、nullの彼の値が正常に検出されます.問題の鍵はやはりObjectとfunctionです.
objectに関する試験:
戻り値をfunctionの外側のobjectに設定します.
let deps = {grewer: 1}
ボタンをクリックする時:
deps.grewer = deps.grewer + 1;
console.log(deps)
deps.grewerの値は変化していますが、effectはトリガされていません.
このように値を設定する場合:
deps = {grewer: deps.grewer + 1};
毎回effect関数を触発します.
再試験:
deps = Object.assign({}, deps)
同じように毎回effect関数をトリガします.
結論を出す:
  • 依存値がobjectである場合、彼の値参照が変化するとeffectの更新がトリガされる.
  • しかし、オブジェクト内の値の変化だけで引用が変化しない場合、effectは依然として
    • をトリガしない.
    functionに関する試験の結論:
  • 初期値がfunctionであり、それを数字にするなど、effect
    • をトリガする.
  • functionも対象です.値を上に追加すると、彼のeffectもトリガされません.
  • は新しい関数として参照すると、彼は毎回トリガされます.
    • テストが終わりました.皆さんもeffectについて多くの理解ができたと信じています.
    他のヤフオクアプリとreduxの全面的な変換、eslintの新たな構成などについても説明します.
    関連記事:
  • react Hook s全面変換攻略(一)react本編のuseState、useffect
  • react Hook s全面変換攻略(二)react本編残アプリ
  • react Hook s完全変換攻略(3)グローバルストレージソリューション
    • javascript関数制限コールコード