React を学ぶ: 知っておくべきフックに関する 5 つの重要な原則 | Inna Sinicka 著 | 2024 年 7 月

まずは基本から始めてみましょう。 意味。

フックは JavaScript 関数を使用して定義されます。フックは特定の種類の再利用可能な UI ロジックを表し、呼び出すことができる場所が制限されています。

フックは関数のように見えますが、いくつかの違いがあります。

• フックは、機能コンポーネントまたはカスタムフックでのみ使用できます。
• フックの名前は常に「use」で始まり、その後に大文字が続きます。
• カスタムフックに他のフックへの呼び出しが含まれていない場合、それはフックではなく関数です。これは、他のフックがあるかどうかを識別するのに役立つため重要です。 内部の状態ロジックまたは効果。

これらの要件を満たすために、useBoolean というシンプルなカスタム フックを作成しましょう。これを使用して、パネルやダイアログを開いたり閉じたり、要素を表示したり非表示にしたりできます。

を見てみると 公式文書フックが返す関数を useCallback にラップすることが推奨されることがわかります。ここではそれを実行します。

interface ICallbacks {
setFalse: () => void;
setTrue: () => void;
toggle: () => void;
}
const useBoolean = (initialValue: boolean): [boolean, ICallbacks] => {
const [value, setValue] = useState(initialValue);
const setFalse = useCallback(() => {
setValue(false);
}, []);
const setTrue = useCallback(() => {
setValue(true);
}, []);
const toggle = useCallback(() => {
setValue(curValue => !curValue);
}, []);
return [value, {setFalse, setTrue, toggle}];
}

基本を覚えておくと、より深く掘り下げてニュアンスをよりよく理解できるようになります。

おそらく、なぜかと疑問に思うでしょう。

React がどのように動作するか、また setter 関数を通じてコンポーネントの状態を変更すると何が起こるかを理解することが重要です。一見すると、状態を変更したように見え、結果はすぐに表示されるはずですが、本当にそうでしょうか?

何が起こっているのかがわかれば、 状態が変更されています、useEffect や依存関係配列を持つその他のフックがいつ、なぜトリガーされるのか理解しやすくなります。

簡単な例を見てみましょう。ボタンを初めて押して、onChangeText を呼び出して値「newValue」を渡すとします。

const [text, setText] = useState("defaultValue");
const onChangeText = (value: string) => {
// value equals "newValue"
setText(value);
console.log(text); //What will be the value here?
}

コンソールに「newValue」が表示されるように見えるかもしれませんが、実際には「defaultValue」が表示されます。なぜでしょうか? 新しい値は再レンダリング後にのみ使用可能になるためです。

発生している手順を確認するには、次のことが必要です。

1. セッター関数を通して状態を変更し、 行動を起こすために反応する。
2. レンダリング。Reactはコンポーネントを呼び出して 新しいJSXを計算するが返されます。
3. コミット。変更を計算した後、 ReactはDOMを変更します; 最小限のアクションが適用されます。
4. 前の手順の後、ビジュアルが表示されます 画面上の変更 （「ブラウザレンダリング」）。

状態の値を変更するたびに、これらの手順が毎回実行されることを覚えておく必要があります。

React には、コンポーネントの状態を管理する 2 つの方法、useState と useReducer があります。2 番目の方法は、状態内のより複雑なオブジェクトを対象としており、正直言って初心者プログラマーにとっては一見難しすぎるように見えるため、あまり一般的ではありません。しかし、実際はそうではありません。

ただし、useState は非常にシンプルでわかりやすいため、新しいプログラマーは必要以上に useState を使用することがよくあります。

ユーザーの操作に応じて、状態を管理することを目的としています。 コンポーネントの再描画レンダリングせずに何かを記憶しておきたい場合は、おそらくそれを状態に置くべきではありません。useRef が最適なオプションです。

次の場合には useState は必要ありません。

• 再レンダリング中に、ユーザーに表示せずにいくつかの値を記憶しておく必要があります。
• 状態にすでにデータがあるか、props を通じてデータを受け取っても変換する必要がある場合、新しい useState オブジェクトに新しい値を保持する必要はありません。新しい変数を作成し、無駄な再レンダリングをトリガーせずにそれを使用して操作します。

次の場合には、値を状態のままにしておく必要があります。

• 値が変更されたときにコンポーネントを再描画する必要があります。最も一般的な例は、パネル、スピナー、エラー メッセージの表示/非表示、配列の変更です。

コードを次のように簡素化します。

/**
This approach gives you useless re-renders and unnecessary
usage of useEffect.
When the name or description changes
and React re-renders the component,
React will check if there is functionality that depends on these values.
useEffect will be triggered when the name or description changes,
creating a new re-render.
**/
const [name, setName] = useState('name');
const { description, index } = props;
const [fullName, setFullName] = useState('');
useEffect(()=>{
setFullName(`${name} - ${description}`);
},[name, description]);

これに対して:

/**
we can use React default behaviour and get the correct value when the name
or descriptions are changed without triggering one more re-render.
**/
const [name, setName] = useState();
const { description, index } = props;
const nameWithDescription = `${name} - ${description}`;

特定のケースでは、クラス コンポーネントで特定のライフサイクル メソッドを使用しました。React 16.8 バージョンでは、すべてに対して 1 つの useEffect フックがあるように見えるかもしれません。

すべてに当てはまるわけではありませんが、2019 年にはフックに関するドキュメントが不足し、信じられないほどの誇大宣伝があったため、可能な限りあらゆる場所でフックを使用する傾向がありました。

公式ドキュメントを見てみましょう:

useEffect コンポーネントを外部システムと同期できる React Hook です。

しかし、実際には、useEffect は必要以上に使用されています。コンポーネントがマウントされるときにデータを取得するのに優れていますが、残念ながら、新しいプログラマーはこのフックを使用して状態を変更する傾向があり、これは最善の解決策ではありません。

1つのコンポーネント内でuseEffectを次から次へと書いていることに気づいたら、コードを止めて見直してください。通常は必要ないので、すぐに それらを排除する。

次の場合には useEffect は必要ありません。

• ユーザー イベント (クリック) を処理する必要があります。どのアクションが何らかのロジックをトリガーするかがわかっている場合は、useEffect を使用してそのロジックを呼び出さないでください。
• レンダリングのためにデータを変換する必要があります。たとえば、状態やプロパティから文字列を連結します。 反応的な価値観や ロジックを依存配列に組み込むとuseEffectが頻繁に呼び出され、 無限ループ。

次の場合には useEffect を選択する必要があります。

• コンポーネントのマウントに関するデータを取得し、間隔を設定して、他のシステムとの状態の同期に使用したい

残念ながら、useRef は過小評価されています。最も人気のあるフックではありませんが、有益です。useRef をどのように、どこで使用するかを知っていれば、素晴らしい結果を得ることができます。

まずは基本から始めましょう。

useRef は、レンダリングに必要のない値を参照できる React フックです。— React公式ドキュメントより。

Reactは、JavaScriptオブジェクトを作成するかどうかにかかわらず、useRefを通じて作成した値を記憶します。 DOM内のノードを参照する または 単純な値再レンダリング時に失われることはありません。

それは私たちに何をもたらすのでしょうか?

• DOM 内の要素に簡単にアクセスできます。たとえば、入力フィールドの値を取得したり、特定の要素にフォーカスしたり、その高さと幅を取得したり、画面の特定の部分にスクロールしたりできます。
• コンポーネントを再レンダリングせずに、必要なデータを記憶できます。たとえば、カウンターやタイマーが必要な場合は、useState ではなく useRef を選択します。

例:

// reference to a number
const refCount= useRef(0);
//reference to an input element
const refInputField = useRef(null);
/**
To access the value, you need to use the current property.
useRef doesn't trigger re-renders so you can use them inside useEffect
without stressing about the dependency array
*/
const onClick = () => {
refCount.current = refCount.current + 1;
refInputField.current.focus();
}
return (

Click me!


>
);