FullStackOpen Part1-d A more complex state, debugging React apps メモ

Complex State

ステートは個々で設定することもできるし、オブジェクトとして定義して使うこともできる(しかし基本的には個別ステートにした方がいい、必ず一緒に変化するときはセットにしてもいいかも)

複数オブジェクトにまとめる場合の例:

const [clicks, setClicks] = useState({
    left: 0, right: 0
  })

  const handleLeftClick = () => {
    const newClicks = {
      ...clicks,
      left: clicks.left + 1,
    }
    setClicks(newClicks)
  }

  const handleRightClick = () => {
    const newClicks = {
      ...clicks,
      right: clicks.right + 1
    }
    setClicks(newClicks)
  }

…clicksのように残りの部分を同じにする

一行だとこんな感じ
const handleLeftClick = () => setClicks({ ...clicks, left: clicks.left + 1 })

ステートを変更するときは必ずsetSomethingを通して

Handle arrays

配列をステートにするときはconcatをうまく使うとよい
e.g. setAll(allClicks.concat('L'))
<p>allClicks.join('-')</p> //joinの引数はセパレータ

Update of the state is asynchronous

ステートの更新setStateは非同期処理
そのため以下のようにする

  const handleLeftClick = () => {
    setAll(allClicks.concat('L'))
    const updateLeft = left + 1
    setLeft(left + 1)
    setTotal(updateLeft + right)
  }

Conditional Rendering

ifを使って条件によって表示する内容を変更できる

Old React

昔のReactにはステートフックがなかった
そのためステートを要するコンポーネントはクラスとして定義する必要があった

Debugging React Application

ブラウザの開発ツールを常に開く

デバッグするときのこつ
- console.logをうまく使う
-一緒にメッセージを付けるときは console.log('some message here', props)　プラスを使わない
- debuggerを使う コード中に"debugger"と打っておくと、その時点での値を開発ツールのコンソールから確認できる　またソースタブから一行ずつ実行できる
-React Developer Toolsの拡張機能はコンポーネントの中身を見れてとても便利！

Rules of Hooks

フックは以下からは呼んではいけない
-ループ中
-IF文中
-コンポーネント定義の関数以外の関数

const App = () => {
  // these are ok
  const [age, setAge] = useState(0)
  const [name, setName] = useState('Juha Tauriainen')

  if ( age > 10 ) {
    // this does not work!
    const [foobar, setFoobar] = useState(null)
  }

  for ( let i = 0; i < age; i++ ) {
    // also this is not good
    const [rightWay, setRightWay] = useState(false)
  }

  const notGood = () => {
    // and this is also illegal
    const [x, setX] = useState(-1000)
  }

  return (
    //...
  )
}

Event Handling Revisited

イベントハンドラー onClick={}は当然ながら関数か関数への参照でないといけない

A function that returns a function

javascriptでは関数を返す関数を定義できる。
const hello = (who) =>{
 const handler = () => console.log('hello', who)
 return handler
}
これは関数を返しているのでイベントハンドラーとして以下のように指定できる
<button onClick={hello('world')}>Wow</button>
<button onClick={hello('react')}>Wow</button>
<button onClick={hello('function')}>Wow</button>

これを応用すると以下のようなことができる
アロー関数の後にアロー関数を使用する
const setToValue = (newValue) => () => {
console.log('value now', value)
setValue(newValue)
}

const FuncFunc = () => {
  const [value, setValue] = useState(10)

  const setToValue = (newValue) => () => {
    console.log('value now', value)
    setValue(newValue)
  }

  return (
    <div>
      {value}
      <button onClick={setToValue(1000)}>1000</button>
      <button onClick={setToValue(0)}>reset</button>
      <button onClick={setToValue(value + 1)}>+1</button>
    </div>
  )
}

またはbuttonのonClick中で関数を返すようにする
const setToValue = (newValue) => setValue(newValue)
<button onClick={() => SetToValue(1000)}>wow</button>

Passing Event Handlers to Child Component

イベントハンドラーを子コンポーネントに渡すこともできる
<Button handleClick={()=>setToValue(1000)} text='1000'} />

Do Not Define Components Within Components

コンポーネント中でコンポーネントを定義してはならない

Web programmers oath

• いつ何時も開発者ツールを開くこと

• 小さなステップで進めること

• console.logを多数使用すること

• もしうまくいかないときは、コードを追加せず、先に修正することから始めること