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 システムをインストールする
前回、私たちは 2 つのヘッダー レイアウト (フレックスボックス 1 つとフロート 1 つ) を考...
Vueでの監視方法時計知らせ名前: 監視する属性に同じ名前を付ける必要があります。 1. 機能Vue...
しかし最近、この方法を使用すると問題が発生することがわかりました。コードを参照してください。コードを...
目次1. 異なるビューポートを取得する方法2. 水平画面と垂直画面のJavaScript検出3. 水...
プロキシを有効にする2つの方法React には、直接使用できるカプセル化された Ajax リクエスト...
<base target=_blank> は、基本リンクのターゲット フレームを新しいペ...
幅と高さを直接使用することはできません。 display:block; または display:in...
1. 引き続き PHP スクリプトを使用して実行します。コマンドラインに入力: php /home/...
<br />序文: このチュートリアルを読む前に、序文を注意深く読んでください。そうしな...
指導トピックウェブページ適用グレード高校2年生授業時間1 クラス教科書分析焦点: 静的および動的ウェ...
目次react-beautiful-dndを選ぶ理由基本的な使い方基本概念使い方使用中に発生した問題...
PS: ここではPHPStudy2016を使用しています1. 変更中にMySQLを停止する2. my...
目次1. Bootstrapグリッドシステムの仕組み1.1 12グリッドシステム1.2 Bootst...
序文プロジェクトの要件は、ユーザーの現在の位置が特定の地理的位置範囲内にあるかどうかを判断することで...
最近、プロジェクトをアップグレードするために Docker を使用しました。これまで使用したことがな...