[KDT]FCFE-7週4日対応

20650 ワード
hooks errorBoundary CreateElement class lifecycle テキストリンク

React


Hooks


hooksの前に


  • 構成部品の内部にステータスがある場合?class

  • 構成部品の内部にステータスがない場合?
  • ライフサイクルが必要な場合は?class
  • のライフサイクルとは関係ないとしたら?function

    • class component

    import React from 'react';

class ClassComponent extends React.Component {
  render(){
    return (<div>Hello</div>);
  }
}

ReactDOM.render(
  <ClassComponent/>,
  document.querySelector('#root')
)

    function component

    import React from 'react';

function FunctionComponent () {
  return (<div>Hello</div>);
}

ReactDOM.render(
  <FunctionComponent/>,
  document.querySelector('#root')
)
    const FunctionComponent = () => <div>Hello</div>;

ReactDOM.render(
  <FunctionComponent/>,
  document.querySelector('#root')
)

    createElement


  • 最初のパラメータtype(タグ名文字列、反応素子、react.fragment)

  • 2番目のパラメータ[props](反応素子に配置されたデータオブジェクト)

  • 3番目のパラメータ[...children](サブエレメントとして加えられたエレメント)
    • // 1. 태그이름 문자열 type

ReactDOM.render(
  React.createElement('h1', null, 'type 이 " 태그 이름 문자열 " 입니다. ' ),
  document.querySelector("#root")
)
    // 2. 리액트 컴포넌트 type

const Component = () => {
  return React.createElement('p', null, `type이 "React 컴포넌트" 입니다.`)
}

ReactDOM.render(
  React.createElement(Component, null, null),
  document.querySelector("#root")
)
    // 3. React.Fragment ( tag 없이 넣기 )

ReactDOM.render(
  React.createElement(React.Fragment, null, `type이 "React Fragment" 입니다.`),
  document.querySelector("#root")
)
    // 4. 복잡한 리액트 엘리먼트 모임

ReactDOM.render(
  React.createElement(
    'div',
    null,
    React.createElement(
      'div',
      null,
      React.createElement(
        'h1',
        null,
        '주제'
      ),
      React.createElement(
        'ul',
        null,
        React.createElement(
          'li',
          null,
          'React'
        ),
        React.createElement(
          'li',
          null,
          'Vue'
        ),
      ),
    )
  ),
  document.querySelector("#root")
)
  • コンパイラを使用して、より複雑なタスクを処理します.( babel )

    • JSX


  • 読みやすさがよい

  • 構文エラーの認識が容易

    • 構文


  • 最上位要素は1つでなければなりません.

  • トップレベルの要素を返す場合は、()でラップする必要があります.

  • 子供たちをすぐに上陸させたいなら、<>자식들</>=>Fragmentを使ってもいいです.

  • JavaScript式を使用するには、{式}を使用します.(${})

  • ドアが使えない場合.(3つの演算子または&&を使用)

  • styleを使用して埋め込み造形を行うことができます.

  • classではなくclassNameを使用してclassを適用できます.

  • サブエレメント、必須、サブエレメントなし、オン、オフ( <br/> )

    • PropsとState


    :Propsは、構成部品の外部から供給されるデータです.
    :Stateは、構成部品内部で変更可能なデータです.

  • 両方が変化すれば、ランダーが再び発生する可能性があります.

  • Render関数は、PropsとStateに基づいて構成部品を描画します.

  • PropsとStateが変更されると、構成部品が再描画されます.

  • 構成部品の描画方法を説明する関数はランダー関数です.

    • Props

  • 関数型
    • function Component(props){
  return (
    <div>
      <h1>{props.message} 이것은 함수로 만든 컴포넌트 입니다.</h1>
    </div>
  )
}

ReactDOM.render(
  <Component message="안녕하세요!!!"/>,
  document.querySelector("#root")
)
  • 級
    • class Component extends React.Component {
  render(){
    return (
      <div>
        <h1>{this.props.message} 이것은 클래스로 만든 컴포넌트 입니다.</h1>
      </div>
    )
  }
}

ReactDOM.render(
  <Component message="안녕하세요!!!"/>,
  document.querySelector("#root")
)
  • default props(propsが指定されていない場合の設定値)
    • function Component(props){
  return (
    <div>
      <h1>{props.message} 이것은 함수로 만든 컴포넌트 입니다.</h1>
    </div>
  )
}

Component.defaultProps = {
  message: "기본값",
};

ReactDOM.render(
  <Component message="안녕하세요!!!"/>,
  document.querySelector("#root")
)
    class Component extends React.Component {
  render(){
    return (
      <div>
        <h1>{this.props.message} 이것은 클래스로 만든 컴포넌트 입니다.</h1>
      </div>
    )
  }
}

Component.defaultProps = {
  message: "기본값",
};

ReactDOM.render(
  <Component/>,
  document.querySelector("#root")
)
    class Component extends React.Component {
  render(){
    return (
      <div>
        <h1>{this.props.message} 이것은 클래스로 만든 컴포넌트 입니다.</h1>
      </div>
    )
  }
  
  static defaultProps = {
    message: "기본값2",
  }
}


ReactDOM.render(
  <Component/>,
  document.querySelector("#root")
)

    state


  • classではstateは常にオブジェクトのシェイプです

  • ステータス変更はsetState()で行います.

    • class Component extends React.Component {
  
  // state = {
  //   count:0,
  // };
  
  constructor(props){
    super(props); 
    this.state={count:0}
  }
  
  render(){
    return (
      <div>
        <h1>{this.props.message} 이것은 클래스로 만든 컴포넌트 입니다.</h1>
        <p>{this.state.count}</p>
      </div>
    )
  }
  
  componentDidMount(){
    setTimeout(()=>{
          this.setState(
          // {
          //   count: this.state.count +1
          // }
          (previousState)=>{
            const newState= {count: previousState.count +1}
            return newState;
          }
        )
      }, 1000
    )
  }
  
  static defaultProps = {
    message: "기본값2",
  }
}


ReactDOM.render(
  <Component/>,
  document.querySelector("#root")
)

    babel


    :複数のバージョンでECMAScriptを使用できるコンパイラ
    <div>Hello</div>
    vコンパイル!
    React.createElemnet("div", null, "Hello");

    Event Handling


  • HTML DOMでクリックイベントが発生した場合、対応する変更を行います.

  • JSXでイベントを設定できます.

  • CamelCaseとしてのみ使用できます.(onClick, onMouseEnter)

  • イベントに接続されているJavaScriptコードは関数です.(event={関数}とともに使用します.)

  • 実際のDOM要素にのみ適用されます.(反応素子に使用される場合、propsに直接伝達される.)

    • 関数の使用

    function Component(props){
  return (
    <div>
      <button onClick={()=>{console.log("click!!")}}>클릭!</button>
    </div>
  )
}

ReactDOM.render(
  <Component/>,
  document.querySelector("#root")
)

    クラスの操作

    class Component extends React.Component {

  state = {
    count: 0,
  };
  
  render(){
    return (
       <div>
         <p>{this.state.count}</p>
         <button
           onClick={() => {
             console.log("click!!");
             this.setState((state) => {
               console.log(state);
               return {
                 ...state,
                 count: state.count + 1,
               };
             });
           }}
         >
           클릭!
         </button>
       </div>
     );
  }
  
  click(){
    console.log("click!!")
    this.setState((state)=>({...state, count: state.count +1,}))
  }
}

ReactDOM.render(
  <Component/>,
  document.querySelector("#root")
)
  • メソッドを作成し、このメソッド
    • をバインドします.
    class Component extends React.Component {

  state = {
    count: 0,
  };
  
  constructor(props){
    super(props);
    this.click = this.click.bind(this);
  }
  
  render(){
    return (
      
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.click}>클릭!</button>
      </div>
    )
  }
  
  click(){
    console.log("click!!")
    this.setState((state)=>({...state, count: state.count +1,}))
  }
}

ReactDOM.render(
  <Component/>,
  document.querySelector("#root")
)

    Component Lifecycle


    :反応素子は開発者が誕生から死亡までの複数の場所で方法をカバーすることができる.

    Declarative(宣言)


  • ライフサイクルの各場所で宣言する方法を使用します.

  • v16.3以前のライフサイクル

  • 初期化:コンストラクション関数を呼び出します.(props、stateを設定します.)

  • 「前」(ComponentWillMount)と「後」(ComponentDidMount)でrenderに基づいて宣言します.

  • upmentsはprops、statesの変更時に再ログインしたときに発表されます.

  • propsとstatesの違いはComponentWillReciptionPropsの存在です.

  • shouldComponentUpdateで渡されるboolean値が重要です.(不要なレンダリングを防ぐ-パフォーマンスの限界)

  • 最初に現れるときはmountと呼ばれます.

    • componentWillReceiveProps


  • 新しくpropsを指定するとすぐに呼び出されます.

  • stateの変更には反応しませんでした.

  • propsの値に基づいてstateを変更する必要がある場合はsetStateを使用してstateを変更します.
    (次のイベントに移動するたびにではなく、一度に変更します.)

    • shouldComponentUpdate

  • propsを
    • に変更
  • 州のみ
    • に変更
  • props&state両方
    • に変更
  • newPropsとnew Stateをパラメータとして
    • を呼び出す.
  • 戻りタイプはbooleanです.デフォルトはtrue
    (true面renderとfalse面renderは呼び出されません.)

    • コンポーネントライフサイクルの変更


    mount

  • constructor
  • componentWillMount -> getDerivedStateFromProps
  • render
  • componentDidMount

    • updation

  • componentWillReceiveProps -> getDerivedStateFromProps
  • shouldcomponentUpdate
  • render
  • コンポーネントWillUpdate->getSnapshotBeforeUpdate(スナップショットとして出力値を返す)
  • (domに適用)
  • コンポーネントDidUpdate(スナップショットを受信するための3番目のパラメータ).

    • コンポーネントエラーキャッシュ


    componentDidCatch(error, info){this.setState({hasError: true});}

  • ErrorBoundary(上部から包囲)

  • 自分の間違いに気づかない.
    • class App extends React.Component {
  state = {
    hasError : false,
  };
  render(){
    if(this.state.hasError){
      return <div>예상치 못한 에러가 발생했다.</div>;
    }
    return <WebService/>;
  }
  componentDidCatch(error, info){
    this.setState({ hasError: true});
  }
}

ReactDOM.render(<App name="Mark"/>, document.querySelector('#root'));
    Swift UIViewの一部を角丸にしたい
    Dockerのワークフローでよくある問題と最終的なシナリオ