第3週react熟練回顧録

個人課題の成果
https://www.youtube.com/watch?v=EaYE4_JyVsk
羽状バニラ
https://github.com/guswls1419/react_practice_2
私はreactの入門駐車を完成し、reactの基礎概念を身につけたと思っています.
今週また新しい接触があった.
redixを使用してパブリケーションリストを管理し、
これは「自分の辞書を作る」という課題です.
課題の詳細は以下の通り.
「投稿記事リスト」ページ

の投稿リスト(各ビューはカードビュー)

を画面に描画します.

投稿の例は青色で表示されます:

Ridexによって管理される投稿リスト

Fire Storeから

投稿リスト

をインポート
出版物ページの作成
ref管理

を使用して記事を公開するために必要な3つの入力:

作成した投稿

を投稿リスト

に追加

投稿リストをFire Store

に保存
11その他の機能(必須)

無限スクロール貼付

変更

投稿

課題の内容を見て、李徳思とFirebaseはまず私がすぐに実現できない機能を横に置いて、タイトル、単語を貼るカード、ボタン、単語入力ウィンドウなど見えるものから、それらを組み合わせることにした.
入門駐車で学んだ内容に従い、stateとpropsを適切に使用してコンポーネントを作成し、Styled Componentsを使用してcssを適用します.
そしてrouterを利用してページ間の移動を可能にする.
ここまでは、あまり難しく実現していませんでした.
しかし、reduxは実現すべきだが、reduxについては全く知らないので、講座を聞いて、使い方を学ぶことにした.
👉Reduxリファレンス
reduxについて知ってると思ってたのに...突然消防基地が現れ、
中间包が现れ始めた时、私の精神は爆発したようです.
火基に接続する場合は非同期操作であるため、中間部品で非同期処理操作を行う必要がある.
動機が何なのか、動機が何なのか分からない単語が続出した.
まず講義を聞いて、それから一つ一つ検索して勉強することにしました.
受講模倣の結果、lode単語カードを作成、lode単語カードを作成する前に、どのように機能を体現しているのか.
delete、update機能もさらなる実装を試みたことがあるが、授業中のコードを理解していない場合、追加のコードを書くのは非常に困難であるため、まずそれに続くコードだけを見てからコード解読を行い、どのような方法でコードを書くのか、それからdelete、update、update機能のさらなる実装を開始します.
最も困難で最も迷っている部分はupdate機能の実現部分です.
修正ボタンを押すと、表示されたウィンドウに元の値が残り、修正した値が再びカードに貼られたが、どうしても感覚が見つからず、趙元元に提案した.
そこで、update機能を実現し、私のコードは以下の通りです.
修正

入力ウィンドウ

  const params = useParams();
  const dispatch = useDispatch();

  const newData1 = useSelector((state)=> state.skilled.list);
 
  const ChingeInputRef_1 = useRef(null);
  const ChingeInputRef_2 = useRef(null);
  const ChingeInputRef_3 = useRef(null);
  
const chinges = (Change_id)=>{
    const name = ChingeInputRef_1.current.value;
    const second = ChingeInputRef_2.current.value;
    const rdata = ChingeInputRef_3.current.value;
       
    dispatch(updateSkilledFB({
      0:name,
      1:second,
      2:rdata,
      id : Change_id  => 값비교를 위해 넘겨준값
    }));
  };
  
  return (
  
     //--생략--
     
   <Input_wrap1 >
      <Label1 for='Name'>React 용어</Label1>
      <Name1 ref={ChingeInputRef_1} type='text' id='Name' defaultValue={newData1[params.chinge_index][0]} />
   </Input_wrap1>
   
   //--생략--
   
  <Link to='/' style={{textDecoration: 'none'}}>
      <Button1 onClick={()=>{chinges(newData1[params.chinge_index].id)
       }} >수정하기</Button1>
   </Link>

//--생략--

修正

ミドルウェア

export const updateSkilledFB = (skilled_Chingeindex) => {
    console.log(skilled_Chingeindex.id)
    return async function (dispatch) {
        const docRef = await doc(db, "Skilled", skilled_Chingeindex.id);
        
        updateDoc(docRef, {
            0:skilled_Chingeindex[0],
            1:skilled_Chingeindex[1],
            2:skilled_Chingeindex[2]
        });
        dispatch(updateSkilled(skilled_Chingeindex));
    };
};

Middlewareセクションでは、クリックしたカードのデータを取得する方法、特にデータを取得する方法を考えています.
組員の助けでid値を作成して相手に配布し、Firebaseに固有のid値を中間パケットからロードして比較した後、私が修正したいカードのデータロードと修正機能を実現できます.
Reduxも難しすぎて、Firebase、何Redux、何Firebaseを加えると、本当に混同がたくさんあります.
今、reduceとは何か、Fire基本コードとは何か、コードがどのように実行されているかを知っていますが、一人でコードを書くのはまだ十分ではありません.そのため、reduceをもっと勉強する必要があります.

第4週キーワード

React hooks

反応v 16.8で新しく導入された機能. 関数形式の要素で使用される技術.
また、ユーザ状態管理機能や、レンダリング後にタスクのユーザ効果を設定する機能も用意されています.
反応素子: クラス構成部品と 関数型要素に分けます.
従来の開発方法は通常 主に関数型構成部品を使用します. 国 ライフサイクルメソッドを使用する必要がある場合のみ これはクラスエレメントを使用する方法です.
しかしながら、hooksの出現により、関数型素子もこれらのクラス素子を処理することができ、関数型素子を用いて既存のクラス素子が有する複雑さと再利用性の欠点を解決した.特にオブジェクト指向(OOP)が苦手な開発者にはreactを中心とした関数を用いることができる.

ライフサイクル

構成部品ライフサイクルは、構成部品の作成から消滅までの一連のイベントと考えられます.
ライフサイクルから見ると、すべての反応素子は3種類に分けることができます.

を作成すると、=マウント=構成部品が画面に表示されます.
構成部品インスタンスを作成し、DOMに挿入するには、ライフサイクルが終了するまで1回のみ発生します.

マウント手順: constructor >  getDerivedStateFromProps > render > componentDidMount

コンストラクタ:新しい構成部品インスタンスが作成されるたびにコンストラクタメソッドが呼び出されます.

render:画面に表示されるJSXを返し、画面に描画します.

コンポーネントDidMount:画面にすべてのコンポーネントを描画した後に呼び出されます.

componentDidMountメソッドは、最初のレンダリング後に実行されます.エンドポイントからクライアントにデータをロードする必要がある場合は、API呼び出しを行うのに良い場所です.データを受信する場合、setStateメソッドを使用して構成部品を更新できます.

更新時=更新=修正時=更新(修正)構成部品

propsまたはstateを変更して構成部品を更新するには、次の方法で順次呼び出します.
.
アップグレードフェーズ:静的getDerivedStateFromProps>shouldComponentUpdate>レンダリング>getSnapshotBeforeUpdate>コンポーネントDidUpdate

render:データが変更されると、自動的に呼び出され、画面が再描画されます.

componentDidUpdate:画面が再描画された後に呼び出されます.

削除時=Unmounting=構成部品が画面から消えます
これはDOMから構成部品を削除するステップです.
Unmountingステップ:ComponentWinUnmount

componentWillUnmount:画面から構成部品を削除する前に呼び出されます.

潮流

4週目のレビュー

やはり大変な1週間でした.私のもとの計画はできるだけ早く課題を完成して、余分な勉強をすることですが、Redux CRUDを実現するのは容易なことではないので、今週はReduxだけを勉強したようです.
技術マネージャーたちもReduxは必ずよく勉強しなければならないと言っています.Reduxは重要な概念のようです.
実際、今週中に課題をクリアした後、感じたBAROをうまく使えば、管理状態にとても役立ちます.
Reactは私が想像していた以上に理解しにくいようですが、それを知れば知るほど、既存のJavaScriptよりも便利だと感じ、本当に大変でした.
これらの反応がますます面白くなってきたと感じました
最近は本当に目を覚ますとパソコンの前にあり、電源を切ると午前2~3時なのですが、疲れて早く寝るという気持ちよりも、もう少し寝て、だんだん遅くなっていく私の今の姿が不思議でした.
私の知る限りでは、来週の反応が深化して駐車してもReduxが現れるので、Reduxをもっと深く研究しなければなりません.