React Hooks에서 this.setState에 해당하는 처리

함수로 React의 구성 요소를 쓰면 기술이 간단해집니다.

const Component = props => <ChildComponent {...props} />

그러나 함수 유형 구성 요소는 props의 매개 변수만 받아들이고 Element의 함수로 되돌아오기 때문에 React 이외의 설정 상태에서 다시 렌더링할 수 없습니다.
클래스 구성 요소라면 구조기나component Did Mount를 통해 set State를 외부 Store에 전달하는 등 리셋을 통해 상태를 바꿀 수 있습니다.
또한 setState에서 변경된state는render를 터치하기 때문에 상태의 변경에 따라 보기를 업데이트할 수 있습니다.
setState의 기능은 함수형 구성 요소로 실현할 수 없습니까?
실제로 ReactHooks를 사용하면 setState와 비슷한 처리를 할 수 있습니다.

// !! 間違いの例 !!
const store = new EventEmitter()

const Component = () => {
  const [state, setState] = useState({/* 初期状態 */})
  store.on('change', newState => setState(newState))
  return <ChildComponent {...state} />
}

usestate Hook으로 setState를 제작할 수 있습니다.
그러나 상술한 실시에는 문제가 있다.
구성 요소가 렌더링될 때마다useState가 호출됩니다
매번 콜백을 등록합니다.
처음의componentDidMount만 실행하는 것과 같은 처리는 함수 구성 요소로 할 수 없습니까?
Hooks의useEffect를 사용하면 그런 처리가 가능합니다.

const store = new EventEmitter()

const Component = () => {
  const [state, setState] = useState({/* 初期状態 */})
  
  useEffect(() => {
    // Storeからstateをセットするハンドラ
    const onChange = newState => setState({...newState})
    // ハンドラをStoreに登録
    store.on('change', onChange)
    // ComponentがDOMから削除されたときの後処理としてハンドラも削除
    return () => store.removeListener('change', onChange)
  }, [])
  
  return <ChildComponent {...state} />
}

useEffect는 렌더링이 발생할 때 호출을 실행하는 Hook입니다.
클래스 구성 요소에 해당하는 componentDidUpdate
기본적으로 매번 렌더링은 실행되지만 선택 가능한 매개 변수를 전달하여 호출의 실행 조건을 설정할 수 있습니다.
useEffect의 두 번째 매개 변수에 배열을 전달하면useEffect는 그 배열의 요소를 검사합니다.
보일 때마다 이 그룹 요소를 지난번에 렌더링할 때 열거한 요소와 비교하고, 변화가 있을 때마다useffect의 호출을 실행합니다.

// a, bの変更をレンダリング毎にチェックして変更があれば"処理"を実行する
useEffect(() => { /* 処理 */ }, [a, b])

이 메커니즘을 사용하면 처음 실행한 Effect만 쓸 수 있습니다.
원소의 값이 바뀌면 다시 실행합니다. 이것은 빈 배열을 건네주면 다시 실행하지 않는다는 것을 의미합니다.

// 空の配列の要素は存在しないので、要素の値の変更もないことになる
useEffect(() => { /* 処理 */ }, [])

처음 실행하기 때문에 이 처리는componentDidMount에 해당한다.
이 궤계는 React의 문서에도 기록되어 있다.
https://ja.reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect
또한useEffect의 호출 값으로 함수를 되돌려주면, 렌더링할 때마다 이 처리를 실행한 후에 다음 호출을 실행합니다.일반적으로 이것은 새로운 처리를 실행하기 전에 지난번 처리의 후처리를 하기 위해 준비한 기능이다.

useEffect(() => {
  /* 処理 */
  return () => { /* 後処理 */ }
})

이 기능도 빈 진열을 두 번째 파라미터에 전달함으로써componentWillUnmount에 해당한다.뒷처리된 호출도 마지막 구성 요소가 DOM에서 삭제되었을 때 한 번으로 불리기 때문이다.함수 구성 요소가 재현되는 동안 다시 실행되지 않기 때문에 마지막으로 실행된 호출로 볼 수 있습니다.
component Did Mount에 해당하는 처리를 할 수 있다면,use State에서 만든 set State를 use Effect의 호출 안에 건네주고 외부 Store 등에 로그인하면 된다.
그나저나 setState를 밖으로 넘겨주시겠어요?그렇게 생각할지 모르지만 set State 함수가 변하지 않을 것을 보증하기 때문에 꺼내도 괜찮아요.훅 호스트가 아니기 때문에 훅스 규칙도 어기지 않는다.
https://ja.reactjs.org/docs/hooks-reference.html#usestate
하나는 쌓이기 쉬운 점으로 setState의 매개 변수에 전달된 값이 배열이나 대상인 경우 내용만 변경하고 다음에도 직접 교부하면 배열이나 대상 자체가 동일하다고 판정돼 업데이트 검사를 하지 않으면 렌더링이 일어나지 않는다.이 경우 평소와 같이 스프레드시트 기법 등을 사용해 제작해 상대방에게 건네주십시오.
Hooks를 사용하면 함수 구성 요소를 통해 클래스 구성 요소가 아닌 여러 가지 처리를 할 수 있습니다.훅 하나로 재현하기 어려운 처리도 여러 훅을 조합할 수 있다.여러분도 훅스 꼭 활용하세요.