Webフロントエンド

React ContextAPIの操作

React コンテキストAPI しばらくの間実験的な機能として出回っていますが、Reactのバージョンでのみです 16.3.0 本番環境で安全に使用できるようになりましたか。以下の記事では、2つの基本的なウェブストアアプリを紹介します。1つはContext APIを使用して構築され、もう1つはContextAPIを使用せずに構築されています。

デザインドキュメントの書き方

この新しいAPIは、1つの大きな問題を解決します– 小道具掘削 。この用語に精通していなくても、React.jsアプリで作業したことがあれば、おそらくそれはあなたに起こったことでしょう。プロップドリルは、中間のReactコンポーネントの複数のレイヤーを通過することにより、コンポーネントAからコンポーネントZにデータを取得する処理です。コンポーネントは間接的に小道具を受け取り、君は、 React開発者すべてが正しく機能することを確認する必要があります。

React Context APIを使用せずに、一般的な問題をどのように処理するかを見てみましょう。

App.js

class App extends Component { state = { cars: { car001: { name: 'Honda', price: 100 }, car002: { name: 'BMW', price: 150 }, car003: { name: 'Mercedes', price: 200 } } }; incrementCarPrice = this.incrementCarPrice.bind(this); decrementCarPrice = this.decrementCarPrice.bind(this); incrementCarPrice(selectedID) { // a simple method that manipulates the state const cars = Object.assign({}, this.state.cars); cars[selectedID].price = cars[selectedID].price + 1; this.setState({ cars }); } decrementCarPrice(selectedID) { // a simple method that manipulates the state const cars = Object.assign({}, this.state.cars); cars[selectedID].price = cars[selectedID].price - 1; this.setState({ cars }); } render() { return (    ); } }

3.コンシューマーを作成します

コンテキストを再度インポートし、コンポーネントをラップして、コンテキストを挿入する必要があります。環境コンポーネントの引数。その後、それはかなり簡単です。あなたが使う環境、使用するのと同じ方法 小道具 。 MyProducerで共有したすべての値を保持しているので、使用する必要があります。

Cars.js

const Cars = () => ( {context => ( Cars:
 {Object.keys(context.cars).map(carID => ( context.incrementPrice(carID)} decrementPrice={() => context.decrementPrice(carID)} /> ))} )} );

何を忘れましたか？ ProductList！ここでメリットが明らかになります。データやメソッドを渡すことはありません。いくつかのコンポーネントをレンダリングするだけでよいため、コンポーネントは単純化されています。

ProductList.js

const ProductList = () => ( Product list:
 {/* Other potential product categories which we will skip for this demo: */} {/* */} {/* */} {/* */} );

この記事の中で、ReduxとContextAPIをいくつか比較しました。 Reduxの最大の利点の1つは、アプリに任意のコンポーネントからアクセスできる中央ストアを含めることができるという事実です。新しいContextAPIを使用すると、デフォルトでその機能を利用できます。 ContextAPIがReduxを時代遅れにするという多くの誇大宣伝がなされてきました。

これは、中央ストアの機能にReduxのみを使用している方にも当てはまるかもしれません。それが使用していた唯一の機能である場合は、これをContext APIに置き換えて、サードパーティのライブラリを使用せずに小道具のドリルを回避できます。

Reactアプリケーションのパフォーマンスの測定と最適化に関心がある場合は、以下をお読みください。 Reactパフォーマンスを最適化するためのガイド 仲間のApeeScapeerWilliamWangによる。

基本を理解する

Consumerとは？

消費者は、保存された情報が最終的に得られる場所です。プロバイダーを介してデータを要求し、プロバイダーが許可している場合は中央ストアを操作できます。

ReactJSはフロントエンドまたはバックエンドライブラリですか？

Reactは、クライアント上でユーザーインターフェイスを構築するためのライブラリであるため、主にアプリケーションのフロントエンドで使用されます。ただし、パフォーマンスを向上させ、SEOを支援するために、Reactアプリケーションにはバックエンドでレンダリングする機能があります。

ReactJSのコンポーネントとは何ですか？

静的なWebサイトは、UIを他のページと共有したり、まったく異なるページに分割する傾向があります。 ReactJSアプリケーションは、コンポーネント（ドロップダウン、埋め込みビデオ、カルーセルなど）に分割されます。これにより、開発者はコンポーネントを1回作成するだけで、どのページでも再利用できるため、時間を節約できます。

ReactJSのコンポーネントの状態は何ですか？

Reactコンポーネントは、コンポーネントの現在の構成に関する情報を保持する独自の状態を持つことができます。たとえば、ユーザー登録フォームには、ユーザーがその状態で[利用規約]チェックボックスをオンにしたかどうかが保存される場合があります。

コンポーネントの状態を共有できますか？

開発者は、小道具を介してコンポーネントを子コンポーネント（親によってレンダリングされるコンポーネント）に渡すことにより、コンポーネントの状態を共有できます。ユーザー登録フォームでは、ユーザーが「利用規約」に同意するまで送信ボタンを無効にすることができます。フォームは、ボタンの小道具を介してチェックボックスの状態を共有できます。