hook

公式ドキュメントのhookの概要
正式なドキュメントの内容を要約すると、state、props階層の変化の困難/ライフサイクルメソッドを用いた複雑さ/クラスの困難/hookが作成されます.
しかしclassは削除されないそうです.(すでにclassコンポーネントが作成されているサイトが多いので、hookと並行する必要があります.)

Thinking in Hooks

class素子とfunction素子(hooks)の形状には以下の違いがあります.

//class component
//prevState/ prevProps와 state/ props를 비교해서 컴포넌트를 업데이트한다.
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.handleOnClick = this.handleOnClick.bind(this);
  }

  handleOnClick(e) {
    this.setState({ count: this.state.count + 1 });
    // this.setState(prevState=>({
    //    count: prevState.count+1
    // }))
  }
  render() {
    return (
      <div className="App">
        <p>you clicked {this.state.count} times</p>
        <button onClick={this.handleOnClick}>click</button>
      </div>
    );
  }
}

//function component(hooks)
//useState의 두 번째 인자에 의존하여 update한다.
//state,props에 종속되지 않고 개발자가 원하는 변수 변화에 따른 함수 실행
export default function App() {
  //import React, {useState} from 'react';일 경우
  const [count, setCount] = useState(0);//0은 초기값
  
  //import React from 'react';일 경우
  //const [count], setCount] = React.useState(0)//0은 초기값
  
  return (
    <div className="App">
      <p>you clicked {count} times</p>
      <button onClick={()=>{setCount(count+1)}}>click</button>
    </div>
  );
}

どちらもcountを1増加させる素子です.

古典的REACTは素子変化時にprops変化時にライフサイクル関数を実行する.Hooksを使用すると、useEffectの2番目のパラメータに依存してdetaが更新されます.これにより、state、propsに依存することなく、開発者は必要な変数の変化に応じて関数を実行することができます.

ライフサイクルのある時点で、コードが実行されるコンピュータ思考(クラスコンポーネント)のデータが変化すると、Webページを直感的に描画できます.符号化の可視性を高めることです.

左側の画像には、1つのデータを使用するための3つのライフサイクル関数があります.propsが変化するたびに、関数は実行されなければなりません.これは効率的ではありません.

右側はデータpropsで、変更するたびにレンダリング関数が実行されます.複雑なpropsが発生しても、データの変化を確認し、コンポーネントを更新できます.

視覚的には古典よりフックが上から下まで読める.

実際の古典的な反応がこのように現れていると理解しにくい.
コメントは入力する必要があります.

hooksで書くと、こんなに簡潔になります.