React バックエンド リクエスト データの実装方法: 1. package.json に ""proxy":"http://localhost:5000"" を設定します; 2. src ディレクトリ " ファイルに "setupProxy.js" を作成します; 3. "setupProxy.js" で設定された関数を呼び出します。コードは "createProxyMiddleware('/api2',{target:...}" など) です。
#このチュートリアルの動作環境: Windows 10 システム、react バージョン 18.0.0、Dell G3 コンピューター
#react バックエンドからデータをリクエストする方法
方法 1: localhost:5000 がプロキシ先のサーバー
"proxy":"http://localhost:5000"
localhost:5000
- ** の /students のデータを取得します。利点: **シンプルな構成、フロントエンド リクエスト リソースは不要です。プレフィックスは必要ありません。
- **欠点: **複数のプロキシ サーバーを構成できません。
- 方法 2: setupProxy を作成します。 src ディレクトリ内の js ファイル
ステップ 1: webpack は、setupProxy.js
setupProxy で構成された関数を呼び出すように構成されます。 js
- #ステップ 2: 構成#
getStudentData = () => { axios.get('/students').then( (result) => { console.log(result.data); }, (reason) => { console.log(reason); }) }
- ##ソリューション リンク: https://www.csdn. net/tags/OtTaIg0sNzE3OC1ibG9n.html
- クロスドメイン リクエストのリアル インターフェイスのケース
- App.jsx
-
//const proxy=require("http-proxy-middleware") :视频中请求的包,引用它出现了无法访问的问题//应该使用以下写法*******const { createProxyMiddleware } = require("http-proxy-middleware");module.exports=function(app){ app.use( createProxyMiddleware('/api1',{//遇见/api1前缀的请求,就会触发该代理配置 target:"http://localhost:5000",//请求转发给谁 changeOrigin:true,//控制服务器收到的请求头中Host字段的值:host就是主机名+端口号 //true:后端接收到的host:localhost:5000 //false:后端接收到的host:localhost:3000 //系统默认为false,一般会设为true pathRewrite:{"^/api1":""}//重写请求路径(必须要写) //不写:后台接收到的请求路径:/api1/student //写了:后台请求的路径:/student }), createProxyMiddleware('/api2',{ target:"http://localhost:5001", changeOrigin:true, pathRewrite:{"^/api2":""} }), )}
import React, { Component } from 'react'
import Search from './components/Search'
import List from './components/List'
import './App.css'
export default class App extends Component {
state={users:[]}
getSearchResult=(result)=>{
this.setState({users:result})
}
render() {
return (
<div>
<search></search>
<list></list>
</div>
)
}
}
- List.jsx
import React, { Component } from 'react' import axios from 'axios' import './index.css' export default class Search extends Component { search = () => { //获取输入框中的值 const { value } = this.keyWordElement; //发送请求 axios.get(`/api1/search/users?q=${value}`).then( result => { this.props.getSearchResult(result.data.items) }, reason => { console.log(reason); }) } render() { return ( <section> <h3 id="搜索github用户">搜索github用户</h3> <div> <input> this.keyWordElement = c} type="text" placeholder="enter the name you search" /> <button>搜索</button> </div> </section> ) } }
PubSubJs:
sub:(subscribe)subscribe
pubsub-js: パブリッシュとサブスクライブの実装に使用されます。 vue.eventBus で確認できます。関数のキャリアと見なされます
#Subscriber: 関数を作成し、この関数をホスト用の pubsub に渡します
#import React, { Component } from 'react' import './index.css' export default class List extends Component { render() { return ( <div> {this.props.users.map(item=>{ return <div> <a> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/020/8311c35cd4729255aa36862f92c15493-0.png?x-oss-process=image/resize,p_40" class="lazy" alt="バックエンドリクエストデータに反応する方法を実装する方法" > </a> <p>{item.login}</p> </div> })} </div> ) } }
- パブリッシャー: パブリッシュとは、サブスクライバーが指定した関数を呼び出してパラメータを渡したり、操作を実行したりする機能を実現することを意味します
#var token=PubSub.subscribe("myTopic",myFunction[托管的函数])//token,是当前订阅函数的唯一id,可以用来取消订阅
-
ステップ 1
- : pubsub-js を追加します
PubSub.publish('myTopic','需要发送给订阅者的内容')
-
**ステップ 2 :**
yarn add pubsub-js
をコンポーネントにインポートします。 **ステップ 3: **PubSub サブスクリプション関数を呼び出します (通常は、componentDidMount フック関数でサブスクライブされます)
import PubSub from 'pubsub-js'
- #デモ
componentDidMount(){ this.token=PubSub.subscribe("changeState",this.changeStateObj) }
import React, { Component } from 'react' import PubSub from 'pubsub-js' import './index.css' export default class List extends Component { state={ users:[],//拿到的用户信息 isFirst:true,//是否第一次访问 isLoading:false,//是否正在加载 err:"",//返回的错误信息 } changeStateObj=(msg,value)=>{ this.setState(value) } componentDidMount(){ this.token=PubSub.subscribe("changeState",this.changeStateObj) } componentWillUnmount(){ PubSub.unsubscribe(this.token) } render() { let {users,isFirst,isLoading,err}=this.state return ( ) } }
- App.jsx
import React, { Component } from 'react' import axios from 'axios' import './index.css' import PubSub from 'pubsub-js' export default class Search extends Component { search = () => { //获取输入框中的值 const { value } = this.keyWordElement; PubSub.publish('changeState',{isFirst:false,isLoading:true}) //发送请求 axios.get(`/api1/search/users2?q=${value}`).then( result => { PubSub.publish('changeState',{isLoading:false,users:result.data.items}) }, reason => { PubSub.publish('changeState',{isLoading:false,err:reason.message}) }) } render() { return ( <section> <h3 id="搜索github用户">搜索github用户</h3> <div> <input> this.keyWordElement = c} type="text" placeholder="enter the name you search" /> <button>搜索</button> </div> </section> ) } }
Ajax リクエストを送信するにはどのような方法がありますか?
xhr:xmlHttpRequest: 従来の ajaxjQuery: カプセル化された xhr
axios: カプセル化された xhr
**fetch (fetch)?* ウィンドウに組み込まれており、サードパーティのライブラリを借用する必要はなく、直接使用できます。欠点: 現時点ではあまり役に立ちません。リクエスト送信インターセプターがありません
- xhr
-
- 欠点
利点: xhrを使用する必要がなく、サードパーティのライブラリをインストールする必要がなく、ネイティブ
fetch を記述する最良の方法
import React, { Component } from 'react' import Search from './components/Search' import List from './components/List' import './App.css' export default class App extends Component { render() { return ( <div> <search></search> <list></list> </div> ) } }は、「
- react ビデオ チュートリアル
- 」を学ぶことをお勧めします
以上がバックエンドリクエストデータに反応する方法を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

在react中,canvas用于绘制各种图表、动画等;可以利用“react-konva”插件使用canvas,该插件是一个canvas第三方库,用于使用React操作canvas绘制复杂的画布图形,并提供了元素的事件机制和拖放操作的支持。

在react中,antd是基于Ant Design的React UI组件库,主要用于研发企业级中后台产品;dva是一个基于redux和“redux-saga”的数据流方案,内置了“react-router”和fetch,可理解为应用框架。

React不是双向数据流,而是单向数据流。单向数据流是指数据在某个节点被改动后,只会影响一个方向上的其他节点;React中的表现就是数据主要通过props从父节点传递到子节点,若父级的某个props改变了,React会重渲染所有子节点。

因为在react中需要利用到webpack,而webpack依赖nodejs;webpack是一个模块打包机,在执行打包压缩的时候是依赖nodejs的,没有nodejs就不能使用webpack,所以react需要使用nodejs。

在react中,forceupdate()用于强制使组件跳过shouldComponentUpdate(),直接调用render(),可以触发组件的正常生命周期方法,语法为“component.forceUpdate(callback)”。

react是组件化开发;组件化是React的核心思想,可以开发出一个个独立可复用的小组件来构造应用,任何的应用都会被抽象成一颗组件树,组件化开发也就是将一个页面拆分成一个个小的功能模块,每个功能完成自己这部分独立功能。

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

react和reactdom的区别是:ReactDom只做和浏览器或DOM相关的操作,例如“ReactDOM.findDOMNode()”操作;而react负责除浏览器和DOM以外的相关操作,ReactDom是React的一部分。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

メモ帳++7.3.1
使いやすく無料のコードエディター

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
