コアポイント
setState()
React Nativeで状態を設定する最も一般的な方法は、Reactの
メソッドを使用することです。また、コンテキストAPIを使用して、小道具の掘削を避け、ツリー内の個々のサブコンポーネントに渡すことなくマルチレイヤー状態を渡すこともできます。 setState()
このチュートリアルでは、実際に何を意味するのか、
メソッド、コンテキストAPI、およびReactフックを学習します。これは、Reactネイティブに状態を設定するための基礎です。すべてのライブラリは、上記の基本概念に基づいて構築されています。したがって、これらの概念を理解したら、ライブラリを理解したり、独自の州管理ライブラリを作成したりするのは簡単です。
setState()
ステータスとは？
時間の経過とともに変化するものはすべて状態と呼ばれます。カウンターアプリケーションがある場合、状態はカウンター自体です。 To Doアプリがある場合、To Doリストは時間とともに変更されるため、このリストはステータスになります。入力要素でさえ、ユーザーが入力すると時間とともに変化するため、ある意味では状態です。
setStateはじめに状態が何であるかがわかったので、Reactがそれをどのように保存するかを理解しましょう。 簡単なカウンターアプリケーションを検討してください： に割り当てます。 変数を作成する理由です。 import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = {
counter: 0,
};
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState({ counter: counter + 1 })} />
<Button title="Decrement" onPress={() => this.setState({ counter: counter - 1 })} />
</>
);
}
}this.state
counter
renderから分解し、this.state内でレンダリングします。現在、静的値（0）のみを表示することに注意してください。 counter
<h1>コンストラクターの外に次のように州を書くこともできます。
「 "" and " - "ボタンが動作する必要があるとします。それぞれの
ハンドラー内にいくつかのコードを書く必要があります：import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = { counter: 0 };
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState({ counter: counter + 1 })} />
<Button title="Decrement" onPress={() => this.setState({ counter: counter - 1 })} />
</>
);
}
}
onPressさあ、「」と「 - 」ボタンをクリックすると、コンポーネントを再レンダリングします。これは、
import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = { counter: 0 };
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState(prevState => ({ counter: prevState.counter + 1 }))} />
<Button title="Decrement" onPress={() => this.setState(prevState => ({ counter: prevState.counter - 1 }))} />
</>
);
}
}setState()メソッド。この場合、再レンダー
setState()したがって、「」をクリックすると、カウンターが1増加します。 「 - 」をクリックすると、カウンターが1削減されます。 <h1>
を変更しても、ステータスを直接変更できないことを忘れないでください。
さらに、状態の変更は非同期操作です。つまり、呼び出した直後にを読んだ場合、最新の変更を反映しないことを意味します。 「コールバックとしての関数」Syntaxは、最新の状態を提供します - この場合は
クラスコンポーネントのコード行の数を18〜12行に削減することに注意してください。さらに、コードの読み取りが簡単です。
メソッドを使用します。 カウンターの例では、数字を取り、2つの値を含む配列を返します。 の最初の値は、配列の最初の値は現在の状態値です。したがって、 の2番目の値は、配列の2番目の値は、状態値を更新できる関数です。 、増分関数は Reactには、 、 ——— React Hooksドキュメントで詳細情報を見つけることができます。
コンテキストapi
これは簡単な例ですが、多数の異なるレベルを持つ実際のアプリケーションを検討してください。 最後の子コンポーネントで使用するために、各子コンポーネントを各子コンポーネントに渡すことが困難になります。したがって、コンテキストがあります。 コンテキストでは、アプリとgtからデータを直接渡すことができます。 以下は、コンテキストAPIの使用方法です。
APIを使用して コンポーネントのルート要素を 値を取得するためにレンダリングプロップとして
この方法では、Callback Hellについて心配する必要はありません。 以下に示すように、簡単なTo Doリストアプリケーションを作成しているとします：
さて、コンポーネントからTo-Doを追加したい場合、 2つの兄弟コンポーネントが状態を共有したい場合、それらは親コンポーネントに宣伝する必要があります。完全な例は次のようになります：
を使用して、 コンポーネントに渡し、
要素もあります。これは、React Hook 。これにより、to-doアイテムが
このように、親コンポーネントを大きな状態オブジェクトにしないでください。 結論 APIを使用して状態を設定する方法を理解しています。また、Reactフックについても学びます。これにより、クラスコンポーネントに変換することなく、機能コンポーネントに状態を簡単に追加できます。 を学びました。
これらのコア概念を理解すると、
反応に関するFAQネイティブ状態管理
）、Redux、MOBX、およびコンテキストAPIなど、さまざまな状態管理方法を提供します。選択は、アプリケーションの複雑さと特定の要件に依存します。
以上がReactネイティブの国家管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。this.state
this.state = counter 1ここでは、「callbackとして関数」構文を使用して、以下に示すようにthis.setState - this.stateメソッドのパラメーターとして。 setState()import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = { counter: 0 };
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState(prevState => ({ counter: prevState.counter + 1 }))} />
<Button title="Decrement" onPress={() => this.setState(prevState => ({ counter: prevState.counter - 1 }))} />
</>
);
}
}prevStateHooksは、React V16.8の新機能です。以前は、クラスコンポーネントを作成することによってのみ状態を使用できました。関数コンポーネント自体で状態を使用することはできません。 setState()
counterは現在0です。 onPressでは、setCounterを使用してcounterを直接更新できます。 setCounter(counter 1)になり、減少関数はsetCounter(counter - 1)になります。 useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef、useImperativeHandle、useLayoutEffect、useDebugValueなどの多くの組み込みフックがあります。 >、
react Functionsのみのフックを呼び出します。通常のJavaScript関数からフックを呼び出さないでください。代わりに、React関数コンポーネントまたはカスタムフックからフックを呼び出すことができます。 useState
useEffectトップレベルのみでフックを呼び出します。ループ、条件、またはネストされた機能内のフックを呼び出しないでください。代わりに、React関数の上部レベルで常にフックを使用してください。このルールに従うことにより、コンポーネントがレンダリングするたびにフックが同じ順序で呼び出されるようにすることができます。これが、Reactが複数のtheme次の例を検討してください。 AppコンポーネントからPicコンポーネントにimport React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = {
counter: 0,
};
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState({ counter: counter + 1 })} />
<Button title="Decrement" onPress={() => this.setState({ counter: counter - 1 })} />
</>
);
}
}themeは、app＆gt -＆gt;上記の問題は、小道具掘削と呼ばれます。 import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = {
counter: 0,
};
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState({ counter: counter + 1 })} />
<Button title="Decrement" onPress={() => this.setState({ counter: counter - 1 })} />
</>
);
}
}React.createContextを作成します。デフォルト値にThemeContextを設定します。 light
次に、themeとThemeContext.Providerにラップします。 App
ThemeContext.Consumerを使用します。 theme
darkプロップモードのレンダリングは適切ですが、複数のコンテキストがある場合、コールバックヘルを引き起こす可能性があります。コールバックHELLを避けるために、ThemeContext.Consumer変更する必要があるのは、Profile
コンポーネント全体で共有状態を共有します<
import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = { counter: 0 };
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState({ counter: counter + 1 })} />
<Button title="Decrement" onPress={() => this.setState({ counter: counter - 1 })} />
</>
);
}
}import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = { counter: 0 };
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState(prevState => ({ counter: prevState.counter + 1 }))} />
<Button title="Decrement" onPress={() => this.setState(prevState => ({ counter: prevState.counter - 1 }))} />
</>
);
}
}AddTodoを空の配列として保存します。 TodoList
todos次に、import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = { counter: 0 };
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState(prevState => ({ counter: prevState.counter + 1 }))} />
<Button title="Decrement" onPress={() => this.setState(prevState => ({ counter: prevState.counter - 1 }))} />
</>
);
}
}AppuseStateコンポーネントは、小道具としてtodosメソッドを受信します。この方法は、ボタンを押した後に呼び出す必要があります。 addTodoを使用して、AddTodoの変化値を追跡します。 todos
TodoListボタンを押した後、親から渡されたAddTodoリストに追加されます。後でaddTodoボックスをクリアします。 TextInputコンポーネントはuseStateを受信し、doリストを提示します。 TextInput
AppこれはReactで最も一般的な慣行です。改善は見た目ほど単純ではありません。これは簡単な例ですが、実際のアプリケーションでは、兄弟コンポーネントで使用するためにどの状態を親に宣伝する必要があるかがわかりません。したがって、最初に、状態はコンポーネント自体に保持され、コンポーネント間で状態を共有する必要がある場合に状況が発生した場合にのみ、状態は親に昇進します。 addTodosetState()
useContext
useState
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
