序文

昨日からreactを学び始め、このような長い時間をかけてようやく現在の市場で最も広く使われているフロントエンドフレームワークであるべきだと学び、vueを使ってきましたが、最初に熟練した良いものを使うように自分に言い聞かせたとき、まず急いで学ぼうとせず、今、vueを使って多くの時間をかけて基本的な使い方をしたことで、reactに触れる時が来たと感じています。たまたま最近、会社がreactを使ってプロジェクトを保守することになったので、この機会に学ぶことができます。

学習

練習

ドキュメントを読んだ後、常に練習に取り掛かる必要があるので、私はメモを書くために人気のreactフックを組み合わせた簡単なプロジェクトを見つけ、プロジェクトはフックを使用していました：

• useState
• useEffect
• useContext
• createContext

ドキュメントによると、useStateとuseEffectが最もよく使われるものです。

最終ページを初公開

まず、入力ボックスのセクションと以下の表示セクションの2つがあります。

useContext

まずはuseContextを紹介しましょう。

公式ドキュメント

** 目的 ** コンテクストは、現在認証されているユーザー、テーマ、優先言語など、コンポーネントツリーに対して「グローバル」なデータを共有するために設計されています。

簡単に説明すると、Contextのサブコンポーネントで必要な変数はすべてConextで提供され、Conextによってサブクラスが利用できるようになります。

** useContextはパラメータとしてContextオブジェクトを受け取るので、最初にcreateContextフック関数を使用してContextオブジェクトを作成し、それを公開します。

import React, { createContext } from "react";
export const TaskListContext = createContext()

<MyContext.Provider> 共有変数は、value属性に変数とメソッドを追加することで公開されます。

import React, { createContext } from "react";
export const TaskListContext = createContext()
const TaskListContextProvider = () => {
	return <TaskListContext.Provider value={}>
 
 </TaskListContext.Provider>
}

** コンポーネントから導入

公開されたContextオブジェクトを導入し、useContextでそれを取得します。

import {TaskListContext} from '../TaskListContext'
const {あなたは、コンテンツを取得したい} = useContext(TaskListContext)

useState

** 使用方法 ** データを共有するためには、this.state でクラスの render 関数を使う必要があります。そこで、このフックを使ってクラスの書き込みメソッドを置き換えると非常に便利です。

** のような配列構造を介して値を割り当てるには、 ** を使用します。

const [title,setTitle] = useState('this is a title')

まず、useStateは2つの値を返します。1つ目は対応する変数の値、2つ目は対応する更新関数です。したがって、基本的な規約は、1つ目は変数名、2つ目はset+変数名で、これはカスタムフックです

たとえば、入力ボックスでビットを達成するために、Vモデルのメソッドで同様のVueを達成するために、原理も非常に簡単です：まず第一に、入力ボックスは、変数として、この属性の値に設定され、その後、ボックスの入力イベントの内容をリアルタイムでこの変数の入力値を更新するために耳を傾ける。

const [value,setValue] = useState('')
function hanldeInput(e){
	setValue(e.target.value)
}
return(
<input value={value} onChange={handleInput} />
)

ps：reactは本当に関数型プログラミング言語であり、vueの言葉はdomと組み合わせて一連の構文シュガーを作成し、それぞれが独自の利点を持って、この場合、直接プログラミングの背後にある原理に基づいて反応し、vueは直接構文シュガーを使用して、最初は理解する必要はないかもしれません、より速く始めることができるかもしれませんが、最終的には、まだ原理を理解する必要があります。

useEffect

このフックは、副作用操作を実行するために使用されます。副作用操作とは何ですか、まず第一に、reactのドキュメントに記載されている**純粋な関数**概念を理解する：関数は、入力パラメータを変更しようとしませんし、同じ入力パラメータの下で複数の呼び出しは常に同じ結果を返します。

副作用とは、その振る舞いがパラメータだけに依存せず、パラメータに基づいて返り値を与えるだけではない関数のことです。データの取得、サブスクリプションの設定、ReactコンポーネントのDOMを手動で変更することは、すべて副作用です。

** 使用法 ** このフックを使うと、レンダリング後に何らかのアクションを実行する必要があることを Reactコンポーネントに伝えることができます。

** useEffect はすべてのレンダリング後に実行されますか？** はい、デフォルトでは、最初のレンダリング後と更新のたびに実行されます。エフェクトが「レンダリング後」に実行されるという考え方の方が、エフェクトが「実装」されたのか「更新」されたのかを考えなくても受け入れやすいかもしれませんが、React ではエフェクトが実行されるたびに DOM が更新されます。Reactは、エフェクトが実行されるたびにDOMが更新されることを保証します。

私のプロジェクトでは、編集機能のひとつをuseEffectで変更しています。

次の計画

react hook + tsでプロジェクトを完成

要約

長い間vueを使用して、時折味を変更することも非常にクールですが、同時にvue3.0のcompositionAPIもドキュメントを読んで、今リアクトと組み合わせることで、新しい理解があるかもしれません後〜、そう...これらの偉大なフレームワークを持っていただきありがとうございます

道のりは長いですよ。