FullStackOpen Part1-c Component state, event handlers メモ

Comopnent helper functions

コンポーネント中で関数を定義して使うこと。以下のbornYear関数にあたる

const Hello = (props) => {
 const bornYear = () => {
  const yearNow = new Data().getFullYear()
  return yearNow - props.age
 }
 return (
  <p>So you are probably born in {bornYear()} </p>
 )
}

Destructuring

props.nameやprops.ageでアクセスしていたpropsオブジェクトを分解して変数に収めること
例: const { name, age } = props
あるいは
const Hello = ({name, age}) => {}

Page re-rendering

Reactでは単に変数の値を変えただけでは画面に反映されない
ReactDOM.createRoot().render()を再度呼び出すと再レンダーできる

Stateful Component

Reactではステートを使用できる
import { useState } from 'react'
const [ counter, setCounter] = useState(0) //これはDestructuringを使用して代入している

例えばsetTimeout関数を使用して以下のようにすると、1秒おきに値を増やすカウンターになる。setTimeoutは関数とミリ秒を指定して、ミリ秒が経過した際に関数を実行する

const [ counter, setCounter] = useState(0)
setTimeout(
 () => setCounter(counter + 1),
 1000
)
return (
 <div>{coutner}</div>
)

Event Handling

<button onClick={handleClick}>のこと
{}内でアロー関数として定義することも可 {() => console.log('clicked')}など

ただしこれはだめ。なぜならonClickの中には関数か、関数への参照が入るから。これは関数呼び出し。
無限にコンポーネントを再描画し続けてしまう
<button onClick={setCounter(counter+1)}
Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Passing state - to child components

あるステートをトリガーとして複数のコンポーネントの表示を更新する場合、最も近い共通の親にステートを共有させるのがベスト

Changes in state cause rerendering

ステートが変わると再描画！