React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。 React は主に UI の構築に使用され、React は MVC の V (ビュー) であると考える人が多いです。 React は Facebook の社内プロジェクトとして始まり、Instagram の Web サイトの構築に使用され、2013 年 5 月にオープンソース化されました。 React はパフォーマンスが高く、コードロジックも非常にシンプルなため、注目して使用する人が増えています。 Reactの機能1. 宣言型設計 − React は、アプリケーションの記述を容易にする宣言型パラダイムを使用します。 2. 効率性 - React は DOM をシミュレートすることで DOM とのやり取りを最小限に抑えます。 3. 柔軟性 − React は既知のライブラリやフレームワークとうまく連携します。 4.JSX − JSX は JavaScript 構文の拡張です。 React 開発では JSX の使用は必須ではありませんが、推奨されます。 5. コンポーネント − React を使用してコンポーネントを構築すると、コードの再利用が容易になり、大規模プロジェクトの開発にも適用できます。 6. 一方向のレスポンシブなデータフロー − React は一方向のレスポンシブなデータフローを実装しており、コードの重複が削減されるため、従来のデータバインディングよりもシンプルです。 以下は、React の非親子コンポーネントパラメータ渡しのコード例です。具体的な内容は以下のとおりです。 新バージョン: クロスレベルパラメータ受け渡しの主な目的は、各レベルで値を割り当てることを避けることと、dvaの使用を避けることです。 'react' から React をインポートします const {プロバイダー、コンシューマー} = React.createContext('default') デフォルトのクラスContextDemoをエクスポートし、React.Componentを拡張します。 状態={ 新しいコンテキスト:'createContext' } 与える() { const { newContext } = this.state 戻る ( <プロバイダー値={newContext}> <div> <label>子コンテンツ</label> <input type="text" value={newContext} onChange={e=>this.setState({newContext:e.target.value})}/> </div> <息子 /> </プロバイダー> ) } } クラスSonはReact.Componentを拡張します{ 与える(){ 返す <消費者> { (名前)=> <div style={{border:'1px solid red',width:'60%',margin:'20px auto',textAlign:'center'}}> <p>サブコンポーネントによって取得されたコンテンツ: {name}</p> <孫 /> </div> } </消費者> } } GrandsonクラスはReact.Componentを拡張します{ 与える(){ 返す <消費者> { (名前)=> <div style={{border:'1px solid red',width:'60%',margin:'20px auto',textAlign:'center'}}> <p>孫コンポーネントによって取得されたコンテンツ: {name}</p> </div> } </消費者> } } 古いプロジェクトメソッドも導入され、prop-typesが使用される。 'react' から React をインポートします 'prop-types' から PropTypes をインポートします クラスContextDemoはReact.Componentを拡張します。 // 子コンテキストを取得する 状態={ 新しいコンテキスト:'createContext' } 子コンテキストを取得する(){ {値:this.state.newContext} を返します } 与える() { const { newContext } = this.state 戻る ( <div> <div> <label>子コンテンツ</label> <input type="text" value={newContext} onChange={e=>this.setState({newContext:e.target.value})}/> </div> <息子 /> </div> ) } } クラスSonはReact.Componentを拡張します{ 与える(){ <div> を返す <p>子:{this.context.value}</p> </div> } } Son.contextTypes = { 値:PropTypes.文字列 } ContextDemo.childContextTypes = { 値:PropTypes.文字列 } エクスポートデフォルト()=> <コンテキストデモ> </コンテキストデモ> 参照 'react' から React をインポートします // 関数コンポーネントもref経由でdomを取得したい const TargetFunction = React.forwardRef((props, ref) => ( <input type="text" ref={ref}/> )) デフォルトのクラスFrodWordRefDemoをエクスポートし、React.Componentを拡張します。 コンストラクタ() { 素晴らしい() this.ref = React.createRef() } コンポーネントマウント() { this.ref.current.value = 'ref 入力を取得' } 与える() { <TargetFunction ref={this.ref}> を返します </ターゲット関数> } } pubsubjs の 'react' から React をインポートします 'pubsub-js' から PubSub をインポートします デフォルトのクラスBroをエクスポートし、React.Componentを拡張します{ 状態 = { 価値:'' } 与える(){ const {値} = this.state PubSub.subscribe('SOS',(res,data)=>{ this.setState({ 値:データ }) }) 戻る ( <div> <h1>{value}</h1> を受け取りました </div> ) } } 'react' から React をインポートします 'pubsub-js' から PubSub をインポートします デフォルトのクラスChildrenをエクスポートし、React.Componentを拡張します{ 状態 = { 価値:'' } ハンドルチェンジ = (e) => { this.setState({ 値:e.target.value }) } 送信 = () => { const {値} = this.state PubSub.publish('SOS',値) } 与える(){ const {値} = this.state 戻る ( <div> <input type="text" value={value} onChange={this.handelChange}/> <button onClick={this.send}>送信</button> </div> ) } } React非親子コンポーネントパラメータ受け渡しのサンプルコードに関する記事はこれで終了です。React非親子コンポーネントパラメータ受け渡しに関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL における explain の役割の詳細な説明
>>: VMware Workstation 14 Pro に Win10 システムをインストールする
たとえば、次のように入力します。 XML/HTML コードdiv#ページ>(div#ヘッダー&...
基本的にすべてのeコマースプロジェクトにはショッピングカートの機能があります。これはreact-na...
最近のブラウザでは、CSS 内で JavaScript を実行することはできなくなりました。以前は、...
この記事では、WeChatアプレットがSMS認証コードのカウントダウンを送信するための具体的なコード...
1. CSS変数がもたらす質的変化CSS 変数によってもたらされる改善は、CSS コードの節約や C...
MySQL 双方向バックアップはマスター-マスター バックアップとも呼ばれ、両方の MySQL サー...
この記事では、MySQL トリガーの定義と使用方法について説明します。ご参考までに、詳細は以下の通り...
1. HTMLタグは常に閉じる前のページのソース コードでは、次のような記述がよく見られます。 &l...
セルでは、明るい境界線の色を個別に定義できます。 > 基本構文<TD ボーダーカラーライ...
目次概要環境の準備プロジェクトのパフォーマンスに影響を与える要因遅延読み込みとは何ですか?プロジェク...
MySQLは1つのテーブルからデータをクエリし、それを別のテーブルに挿入する実装方法ウェブサイト開発...
コードをコピーコードは次のとおりです。 <div contenteditable="...
以下のように表示されます。 CSSコードコンテンツをクリップボードにコピー分割{境界線: 2px 固...
目次1. RabbitMqの動作環境を構築する1.検索を通じてrabbitmqイメージを照会する2....
最近、MySQL 5.6 を導入しましたが、デフォルトでは MySQL はローカル サービスのみを許...