改訂ベース3)

import export

export defaultは一度しか使用できません.
export変数の多くはexportできます
//common.js
module.exports = a;
//es 5構文
export default a;
export const a;
2つは互換性があると考えられます.
nodeの文法は通用する.jsと呼ぶ
.jsxでwebpackを使用してseo importを使用すればいいです.
webpack.config.jsでimportを使用するのは互換性がありません.
これはbabelがこのような互換性を生むからです.

反復文マッピングへの応答

{['바나나', '포도', '사과', '딸기', '귤'].map( (v) => {
                        return (
                            <li>{v}</li>
                        );
                    })}

バナナ
ぶどう
りんご
いちご
みかん
現れます.
JavascriptのMap関数を使用して反作用に適用する例

React key

一意のキー値を取得し、繰り返し文に入れる必要があります.

<li key={v.fruit + v.taste}><b>{v.fruit}</b> - {v.taste}</li>

注意事項
keyのインバースアクティビティは、パフォーマンスの最適化に使用され、

map( (v, i) => {
                return (
                    <li key={i}><b>{v.fruit}</b> - {v.taste}</li>
                );
            })

iを使用してkeyを作成する場合は、reactでkeyを使用して別名を追加するか、
削除を修正するときに判断し、配列順が変わると問題が発生する可能性があります.
つまり、この方法は使えない.

React Props

読みやすさを向上させ、パフォーマンスを最適化するために、コンポーネントとして個別に削除します.
データを渡すためにPropsを使用します.
もしそうであれば、Try素子はv,iが何であるかを知らない.
Try構成部品では使用できません.

{this.fruits.map( (v, i) => {
                    return (
                        <Try />
                    );
                })}

は、通常、1つの要素に記載され、

に記載される.

新規構成部品を作成する

Propsへの移行
練習をしましょう.
大きいのから分離の練習を作りますほほほ

Propsを使用すると、親構成部品が形成され、データが提供されるのは親構成部品です.
サブエレメント

Reactのコメント

{/* <input maxLength={4} value={this.state.value} onChange={this.onChangeInput} /> */}

Reactの配列を追加

ReactがRenderを行う基準は、以前の状態とは異なる必要があります.
pushだけなら、前のstateと今のstateは変わっていないと考えられます.
だから反応するときは前の関数だけを押すわけにはいかない...arr 1に入れる
そしてお金を追加します.
ex)

      this.setState({
        result: '홈런!',
        tries: [...this.state.tries, { try: this.state.value, result: '홈런!' }],
      });        //...this.state.tries : 옛날것, { try: this.state.value, result: '홈런!' } : 추가할것

非構造配分

const { result, value, tries, answer } = this.state;

これを使用します.stateは一つも使わず、上のようにできます.

React Developer Tools

Chromeからダウンロードして使用

render()

state,propsが変更されるとreactがロードされます.
stateを変更せず、setStateのみを変更します.以下に示します.
renderが呼び出されます.

    this.setState({});

shouldComponentUpdate

に対する境界温度ノードが作成できません.

shouldComponentUpdate(nextProps, nextState, nextContext) {
    if (this.state.counter !== nextState.counter) { //이전의 counter와 나중의 counter가 변경이될경우
        return true; // render 한다
    }
        return false; // render 안한다
    }

PureComponent

卓越したパフォーマンス向上!!![PureComponent, memo]자식 컴포넌트에는 왠만해서는 넣어주는게 좋다. render가 될때 계속 리로딩되니 불필요한 Render가 되기때문自動実装shouldComponentUpdate(PureComponent shouldComponentUpdateをXXに設定)
PureComponentでは、単純な文字列、number、booleanをチェックできます.
object、arrayなどの状況は確定しにくい.
また、array、objectの場合、通常は直接プッシュしてレンダリングできません.
以前の値...(展開演算子)を挿入し、次の値を挿入するだけです.
を選択して設定できます.
**また、このように複雑な内容をstateに入れないでください.

state = {
    counter: 0,
    string: "hello",
    number: 1,
    boolean: true,
    object: {},
    array: [],
  };

  onClick = () => {
    <!-- const array = this.state.array;
    array.push(1);
    this.setState({
      array: array,
    }); -->
    this.setState({
        array: [...this.state.array, 1]
    })
  };

HooksからPureComponent、ShouldComponentUpdateを更新

Hooksでは次のように使用されます.

import React, { memo } from 'react';
// 구조분해 사용해서 props를 tryInfo로 바로 전환한후 사용
// Hooks를 사용할때에는 PureComponent도 없고, shouldComponentUpdate도 없기때문에 memo라는것을 사용 Props, state가 바꼈을때만 render
const Try = memo(({ tryInfo }) => {
  return (
    <li>
      <div>{tryInfo.try}</div>
      <div>{tryInfo.result}</div>
    </li>
  );
});

export default Try;

createRef()

import React, { Component, createRef } from 'react';
inputRef = createRef();
<input ref={this.inputRef} maxLength={4} value={value} onChange={this.onChangeInput} />

Context

A -> B -> C -> D -> E -> F -> G
このように出現した場合、中間過程を経ずにA->Gアイテムやデータを直接あげたい場合
Contextを使用すると、Reduxはこれらの異種を使用することもできます.
props -> context -> redux
Quiz

import React, {Component} from 'react';

class ResponseCheck extends Component {
    state = {
        state: 'waiting',
        message: '클릭해서 시작하세요.',
        result: [],
    };

    timeout;
    startTime;

    onClickScreen = () => {
        const { state, message, result } = this.state;
        if(state === 'waiting'){
            this.setState({
                state: 'ready',
                message: '초록색이 되면 클릭하세요',
            });
            this.timeout = setTimeout(() => {
               this.setState({
                   state: 'now',
                   message: '지금 클릭'
               })
               this.startTime = new Date();
            }, Math.floor(Math.random() * 1000) + 2000); // 2~3초후에 settimeouts
        } else if ( state === 'ready'){
            clearTimeout(this.timeout);
            this.setState({
                state: 'waiting',
                message: '너무 성급하시군요! 초록색이 된후에 클릭하세요!'
            })
        } else if ( state === 'now'){
            this.endTime = new Date();
            this.setState( (prevState) => {
                return{
                    state: 'waiting',
                    message: '클릭해서 시작하세요!',
                    result : [...prevState.result, this.endTime - this.startTime]
                }
            })
        }
    }

    onReset = () => {
        this.setState({
            result: []
        })
    }

    renderAverage = () => {
        const { result } = this.state;
        //삼항 연사자를 이용해서 if를 사용하기
        return(
            result.length === 0 ? null 
            : <>
                <div>평균 시간 : {result.reduce((a, c) => a + c) / result.length}ms</div>
                <button onClick={this.onReset}>리셋</button>
            </>
        )
    };

    render(){
        return(
            <>
                <div id="screen" className={this.state.state} onClick={this.onClickScreen}>
                    {this.state.message}
                </div>
                {this.renderAverage()}
            </>
        )
    }
}

export default ResponseCheck;