react怎麼調用另外一個潔面

① react中怎麼調用別人的介面

昨天玩了一會ReactNative，想用CNode社區的介面做個客戶端，做到Topic詳情頁的時候發現不知道如何展示HTML內容。翻了一下ReactNative的文檔沒有找到合適的組件，WebView需要有URL才可以。代碼放在這里：CNodeReactNativefb只是提供了一些基本的，所以玩native是需要oc和js都會的剛有時間又研究了一下，貌似ReactNative更新了WebView的API，可以傳入一個HTML的屬性直接渲染HTML內容

② react import怎麼使用

說說React

一個組件，有自己的結構，有自己的邏輯，有自己的樣式，會依賴一些資源，會依賴某些其他組件。比如日常寫一個組件，比較常規的方式：

－ 通過前端模板引擎定義結構

－ JS文件中寫自己的邏輯

－ CSS中寫組件的樣式

－ 通過RequireJS、SeaJS這樣的庫來解決模塊之間的相互依賴，

那麼在React中是什麼樣子呢？

結構和邏輯

在React的世界裡，結構和邏輯交由JSX文件組織，React將模板內嵌到邏輯內部，實現了一個JS代碼和HTML混合的JSX。

結構

在JSX文件中，可以直接通過 React.createClass 來定義組件：

var CustomComponent = React.creatClass({
render: function(){
return (<div className="custom-component"></div>);
}
});

通過這種方式可以很方便的定義一個組件，組件的結構定義在render函數中，但這並不是簡單的模板引擎，我們可以通過js方便、直觀的操控組件結構，比如我想給組件增加幾個節點：

var CustomComponent = React.creatClass({
render: function(){
var $nodes = ['h','e','l','l','o'].map(function(str){
return (<span>{str}</span>);
});
return (<div className="custom-component">{$nodes}</div>);
}
});

通過這種方式，React使得組件擁有靈活的結構。那麼React又是如何處理邏輯的呢？

邏輯

寫過前端組件的人都知道，組件通常首先需要相應自身DOM事件，做一些處理。必要時候還需要暴露一些外部介面，那麼React組件要怎麼做到這兩點呢？

事件響應

比如我有個按鈕組件，點擊之後需要做一些處理邏輯，那麼React組件大致上長這樣：

var ButtonComponent = React.createClass({
render: function(){
return (<button>屠龍寶刀，點擊就送</button>);
}
});

點擊按鈕應當觸發相應地邏輯，一種比較直觀的方式就是給button綁定一個 onclick 事件，裡面就是需要執行的邏輯了：

function getDragonKillingSword() {
//送寶刀
}
var ButtonComponent = React.createClass({
render: function(){
return (<button onclick="getDragonKillingSword()">屠龍寶刀，點擊就送</button>);
}
});

但事實上 getDragonKillingSword() 的邏輯屬於組件內部行為，顯然應當包裝在組件內部，於是在React中就可以這么寫：

var ButtonComponent = React.createClass({
getDragonKillingSword: function(){
//送寶刀
},
render: function(){
return (<button onClick={this.getDragonKillingSword}>屠龍寶刀，點擊就送</button>);
}
});

這樣就實現內部事件的響應了，那如果需要暴露介面怎麼辦呢？

暴露介面

事實上現在 getDragonKillingSword 已經是一個介面了，如果有一個父組件，想要調用這個介面怎麼辦呢？

父組件大概長這樣：

var ImDaddyComponent = React.createClass({
render: function(){
return (
<div>
//其他組件
<ButtonComponent />
//其他組件
</div>
);
}
});

那麼如果想手動調用組件的方法，首先在ButtonComponent上設置一個 ref="" 屬性來標記一下，比如這里把子組件設置成 <ButtonComponent ref="getSwordButton"/> ，那麼在父組件的邏輯里，就可以在父組件自己的方法中通過這種方式來調用介面方法：

this.refs.getSwordButton.getDragonKillingSword();

看起來屌屌噠~那麼問題又來了，父組件希望自己能夠按鈕點擊時調用的方法，那該怎麼辦呢？

配置參數

父組件可以直接將需要執行的函數傳遞給子組件：

<ButtonComponent clickCallback={this.getSwordButtonClickCallback}/>

然後在子組件中調用父組件方法：

var ButtonComponent = React.createClass({
render: function(){
return (<button onClick={this.props.clickCallback}>屠龍寶刀，點擊就送</button>);
}
});

子組件通過 this.props 能夠獲取在父組件創建子組件時傳入的任何參數，因此 this.props 也常被當做配置參數來使用

屠龍寶刀每個人只能領取一把，按鈕點擊一下就應該灰掉，應當在子組件中增加一個是否點擊過的狀態，這又應當處理呢？

組件狀態

在React中，每個組件都有自己的狀態，可以在自身的方法中通過 this.state 取到，而初始狀態則通過 getInitialState() 方法來定義，比如這個屠龍寶刀按鈕組件，它的初始狀態應該是沒有點擊過，所以 getInitialState 方法裡面應當定義初始狀態 clicked: false 。而在點擊執行的方法中，應當修改這個狀態值為 click: true ：

var ButtonComponent = React.createClass({
getInitialState: function(){
//確定初始狀態
return {
clicked: false
};
},
getDragonKillingSword: function(){
//送寶刀
//修改點擊狀態
this.setState({
clicked: true
});
},
render: function(){
return (<button onClick={this.getDragonKillingSword}>屠龍寶刀，點擊就送</button>);
}
});

這樣點擊狀態的維護就完成了，那麼render函數中也應當根據狀態來維護節點的樣式，比如這里將按鈕設置為 disabled ，那麼render函數就要添加相應的判斷邏輯：

render: function(){
var clicked = this.state.clicked;
if(clicked)
return (<button disabled="disabled" onClick={this.getDragonKillingSword}>屠龍寶刀，點擊就送</button>);
else
return (<button onClick={this.getDragonKillingSword}>屠龍寶刀，點擊就送</button>);
}

小節

這里簡單介紹了通過JSX來管理組件的結構和邏輯，事實上React給組件還定義了很多方法，以及組件自身的生命周期，這些都使得組件的邏輯處理更加強大

資源載入

CSS文件定義了組件的樣式，現在的模塊載入器通常都能夠載入CSS文件，如果不能一般也提供了相應的插件。事實上CSS、圖片可以看做是一種資源，因為載入過來後一般不需要做什麼處理。

React對這一方面並沒有做特別的處理，雖然它提供了Inline
Style的方式把CSS寫在JSX裡面，但估計沒有多少人會去嘗試，畢竟現在CSS樣式已經不再只是簡單的CSS文件了，通常都會去用Less、
Sass等預處理，然後再用像postcss、myth、autoprefixer、cssmin等等後處理。資源載入一般也就簡單粗暴地使用模塊載入器
完成了

組件依賴

組件依賴的處理一般分為兩個部分：組件載入和組件使用

組件載入

React沒有提供相關的組件載入方法，依舊需要通過 <script> 標簽引入，或者使用模塊載入器載入組件的JSX和資源文件。

組件使用

如果細心，就會發現其實之前已經有使用的例子了，要想在一個組件中使用另外一個組件，比如在 ParentComponent 中使用 ChildComponent ，就只需要在 ParentComponent 的 render() 方法中寫上 <ChildComponent /> 就行了，必要的時候還可以傳些參數。

疑問

到這里就會發現一個問題，React除了只處理了結構和邏輯，資源也不管，依賴也不管。是的，React將近兩萬行代碼，連個模塊載入器都沒有提供，更與Angularjs，jQuery等不同的是，他還不帶啥腳手架…沒有Ajax庫，沒有Promise庫，要啥啥沒有…

虛擬DOM

那它為啥這么大？因為它實現了一個虛擬DOM（Virtual DOM）。虛擬DOM是干什麼的？這就要從瀏覽器本身講起

如我們所知，在瀏覽器渲染網頁的過程中，載入到HTML文檔後，會將文檔解析並構建DOM樹，然後將其與解析CSS生成的CSSOM樹一起結合產
生愛的結晶——RenderObject樹，然後將RenderObject樹渲染成頁面（當然中間可能會有一些優化，比如RenderLayer樹）。
這些過程都存在與渲染引擎之中，渲染引擎在瀏覽器中是於JavaScript引擎（JavaScriptCore也好V8也好）分離開的，但為了方便JS
操作DOM結構，渲染引擎會暴露一些介面供JavaScript調用。由於這兩塊相互分離，通信是需要付出代價的，因此JavaScript調用DOM提
供的介面性能不咋地。各種性能優化的最佳實踐也都在盡可能的減少DOM操作次數。

而虛擬DOM幹了什麼？它直接用JavaScript實現了DOM樹（大致上）。組件的HTML結構並不會直接生成DOM，而是映射生成虛擬的
JavaScript DOM結構，React又通過在這個虛擬DOM上實現了一個 diff
演算法找出最小變更，再把這些變更寫入實際的DOM中。這個虛擬DOM以JS結構的形式存在，計算性能會比較好，而且由於減少了實際DOM操作次數，性能會
有較大提升

③ 使用react框架怎麼進行組件的遞歸調用

JS有一種語法，叫做函數的尾遞歸（具體用法自己查）。
react組件本身不具備這些功能，需要自己用js控制業務邏輯。
例如有一個顯示評論內容的組件，當客戶端請求成功，並且返回多級json結構的時候，客戶端就需要先判斷結構有幾層，然後用js控制載入的組件層次，將數據props過去。
一般的情況下，層數只有2,參考UC的評論模式，假設我寫了一個評論，則為頂層，然後你可以在我的評論下面評論，這樣就有了2層，但是別人又可以回復你的評論，這時就要注意了，別人回復你的評論還是在第2層，也就是說，任何人的評論都只在頂層之下的同一層，不會超出2層的結構，這樣做才合理。像你說的那種，就是可以有幾十上百層評論結構，那樣顯示就不好看了。。

④ 如何在React中調用微信的jsSDK

1. 微信JSSDK使用步驟簡介

我們既然是在做基於微信的開發，當然就離不開微信的開發文檔了。開始之前希望大家能先去看下《微信JS-SDK說明文檔》。那麼我們怎麼樣才能用上微信的JSSDK呢？以下基本步驟就是基於該文檔的。

需要注意的是，如果本人下面的描述你看的有點雲里霧里的話，我建議你：

• 回頭看下本系列《小白學react》的歷史基礎文章，特別是《小白學react之altjs的Action和Store》以及《小白學react之打通React Component任督二脈》，或/和：

• 直接跳過我的描述，在文章後面下載最新的源碼，先閱讀源碼，碰到問題再反過來看文章的描述。

步驟一：綁定域名

先登錄微信公眾平台進入「公眾號設置」的「功能設置」里填寫「JS介面安全域名」。
備註：登錄後可在「開發者中心」查看對應的介面許可權。

這里綁定的時候需要注意不要帶前面的http協議頭。寫法跟上一篇《小白學react之網頁獲取微信用戶信息》中的網頁回調域名設置的寫法是一樣的。

步驟二：引入JS文件

在需要調用JS介面的頁面引入如下JS文件，（支持https）：

請注意，如果你的頁面啟用了https，務必引入 ：
，否則將無法在iOS9.0以上系統中成功使用JSSDK

因為我們的index.html是通過ejs模版生成的，所以我們只需要在我們的index.ejs中的body部分末尾加入相應的微信jssdk庫的引用就好了。

• <% for (var chunk in htmlWebpackPlugin.files.chunks) { %> <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>


• <script src="jweixin-1.0.0.js"></script>


• <% } %>



步驟三：通過config介面注入許可權驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。

• wx.config({


• debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會列印。


• appId: '', // 必填，公眾號的唯一標識


• timestamp: , // 必填，生成簽名的時間戳


• nonceStr: '', // 必填，生成簽名的隨機串


• signature: '',// 必填，簽名，見附錄1


• jsApiList: [] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2});



這一步的關鍵是如何生成正確的簽名。這里微信jssdk文檔中有給出不同語言版本的簽名演算法示例大家可以參考。往下我們也會就github上的一個簽名演算法的封裝進行學習。

在我們的實戰過程中，簽名會在伺服器端發生。

react客戶端會像之前的獲取微信用戶信息一樣，通過一個restfulApi調用伺服器端的api，然後由伺服器來生成對應的簽名，然後將簽名信息返回給客戶端。

客戶端獲取到上面wx.config示例代碼中的簽名相關信息後，就會調用一個Alt的Action，來觸發將獲取回來的信息保存到一個跟該Action綁定的jssdk狀態管理的Store裡面。然後就可以調用wx.config來配置我們需要用到的JS介面列表了。

注意這里的wx這個對象是通過上一步的JS文件引入進來的。我們在react的客戶端代碼中可以直接通過window.wx對其進行引用：

• window.wx.config({


• ...


• });



步驟四：通過ready介面處理成功驗證

• wx.ready(function(){ // config信息驗證後會執行ready方法，所有介面調用都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就調用相關介面，則須把相關介面放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的介面，則可以直接調用，不需要放在ready函數中。});



隨後，react客戶端負責jssdk狀態管理的store會調用wx.ready來監聽config配置是否成功，如果成功的話，就會將該store的一個ready狀態設置成true。

這樣的話，通過AltContainer綁定了該store的相應的Component組件就能知道響應的jssdk的api是否已經准備就緒，可以進行調用了。

步驟五：通過error介面處理失敗驗證

• wx.error(function(res){ // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。});



同理，如果如果配置失敗的話，那麼就在wx.error這個監聽介面中將ready狀態設置成false。

2. 生成簽名

如前面所述，我們需要用到jssdk的頁面必須要要注入調用到的api的配置信息。

• wx.config({


• debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會列印。


• appId: '', // 必填，公眾號的唯一標識


• timestamp: , // 必填，生成簽名的時間戳


• nonceStr: '', // 必填，生成簽名的隨機串


• signature: '',// 必填，簽名，見附錄1


• jsApiList: [] // 必填，需要使用的JS介面列表



而注入JS介面到頁面時，我們可以看到，還需要使用到其他一些信息。其中appId我們可以從公眾號管理後台獲得。signature是跟所訪問頁面的url關聯的一個簽名，它有專門的一套演算法來生成。另外兩個參數nonceStr和signature都是在簽名的過程中生成的。

這里通過wx.config傳進去這些參數，主要是為了讓微信去判斷我們生成的簽名和微信通過這些信息生成的簽名是否一致，如果不一致的話，那麼注入到該頁面的jsApiListj就失敗。

那麼我們在伺服器這邊的簽名演算法是如何的呢？根據微信開發文檔我們需要提供以下4個參數，然後通過sha1算發來生成對應的簽名：

• noncestr：一個隨機字元串，我們隨便填寫

• jsapi_ticket：jsapi_ticket是公眾號用於調用微信JS介面的臨時票據

• timestamp: 簽名時間戳。注意這個時間戳需要和上面傳入wx.config的時間戳一致

• url: 調用JS介面頁面的完整URL。我們可以從react客戶端通過location.href獲得，並傳給伺服器端

那麼這里主要需要解決的就是如何獲得jsapi_ticket這個臨時票據了。

根據文檔的描述，我們可以通過以下這個介面獲得：

cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

從中可以看到，我們調用這個介面首先要獲得一個access_token。這里微信也有相應的api來處理。

cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

這里需要用到我們的微信公眾號的appId和secret，這些我們都是已知的，所以好辦。

那麼，也就是說，我們其實只需要提供我們的微信公眾號的appId和secret，就能獲取到access_token，從而就會獲得我們需要的jsapi_ticket。

這里我們參考下github上一個示例(wechat-sdk-demo )的簽名的實現。其傳入的參數有兩個，其中:

• url: react客戶端傳進來的需要注入jsapi的頁面url

• callback: 一個回調函數，接受一個json格式的參數。主要是用來將生成的簽名信息等回傳給上層調用函數。

• const config = { grant_type: 'client_credential', appid: 'xxxx', secret: "xxxxx", noncestr:'Wm3WZYTPz0wzccnW', accessTokenUrlin.qq.com/cgi-bin/token', ticketUrl:'com/cgi-bin/ticket/getticket',


• }



• exports.sign = function (url,callback) { var noncestr = config.noncestr,


• timestamp = Math.floor(Date.now()/1000), //精確到秒


• ...


• request(config.accessTokenUrl + '?grant_type=' + config.grant_type + '&appid=' + config.appid + '&secret=' + config.secret ,function(error, response, body){ if (!error && response.statusCode == 200) { var tokenMap = JSON.parse(body);


• request(config.ticketUrl + '?access_token=' + tokenMap.access_token + '&type=jsapi', function(error, resp, json){ if (!error && response.statusCode == 200) { var ticketMap = JSON.parse(json);


• cache.put('ticket',ticketMap.ticket,config.cache_ration); //加入緩存


• callback({ noncestr:noncestr, timestamp:timestamp, url:url, jsapi_ticket:ticketMap.ticket, signature:sha1('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url)


• });


• }


• })


• }


• })


• }


• }



這里的流程和我們剛才描述的並無二致。首先是通過appId和secret獲得調用獲取jsapi_ticket的access_token，然後通過該access_token獲得我們簽名需要用到的jsapi_ticket。noncestr我們是提前隨便填寫好的。timestamp的演算法也比較簡單。

最後就是通過sha1這個庫提供的方法，將jsapi_ticket，noncestr，timestamp和頁面url進行sha1簽名，然後將以上這些信息通過callback返回給上層調用函數。

那麼我們往下看下我們的上層調用函數。其實就是我們的express路由:

• app.get("/api/signature", function(req,res) { const url = req.query.url.split('#')[0];



• signature.sign(url,function(signatureMap){


• signatureMap.appId = wechat_cfg.appid;


• res.send(signatureMap);


• });



• })



根據微信開發文檔需求，我們首先需要將傳進來的url的錨點後面的數據給去掉，保留前面的有效部分。

然後就是調用上面的sign方法來生成簽名。上面的簽名方法最後傳進來的json數據就是這里的signatureMap。我們最終會將這些數據發送回react客戶端。

同時，通過上面的wx.config的示例，我們知道還需要用到微信公眾號的appId。所以這里一並將其放到signatureMap中進行返回。

那麼到此為止，react客戶端調用服務端的"/api/signature"返回的數據示例如下:

• {


• noncestr: 'Wm3WZYTPz0wzccnW',


• timestamp: 1476873698,


• url: 'com/?code=&state=',


• jsapi_ticket: 'sM4AOVdWfPE4DxkXGEs8VBqyVbs-TKGYp4d_ZSQa0Q5WvvMUPNQ6XGpyEcgKOD_xID_GrMCaalSmIF9JbrGaOg',


• signature: ''


• }



3. 客戶端獲取簽名信息

3.1 獲取簽名信息並注入jssdk

和之前的獲取微信用戶信息一樣，我們這里會建立一個新的Source文件WechatSdkSource.js來調用遠程伺服器的"/api/signature"介面:

• var WechatSdkSource = {


• fetchSignatureMap() { return {


• remote(state,url) { return co(function *() { let signatureMap = null; const getSignatureMapUrl = `/api/signature`; try { let result = yield request.get(getSignatureMapUrl).query({url:url});


• signatureMap = result.body;


• } catch (e) {


• signatureMap = null;


• } //console.log("userInfo:", userInfo);


• return signatureMap;


• });


• },



• local() { // Never check locally, always fetch remotely.


• return null;


• }, success: WechatSdkActions.updateSignatureMap, error: WechatSdkActions.getSignatureMapFailed, loading: WechatSdkActions.getSignatureMap,


• }


• }


• };



這里傳進來的url由下面將要談及的上層函數所生成。整個流程就沒有什麼好說的了，說白了就是通過相應的庫發送一個帶有url的query參數的請求到伺服器端來請求簽名信息，相信有跟著這個系列文章的朋友都是很清楚的了。

最終請求成功返回的時候就會調用WechatSdkActions的updateSignatureMap這個Action。

• var alt = require('../alt');mole.exports = alt.generateActions( 'updateSignatureMap', 'getSignatureMap', 'getSignatureMapFailed',


• );



而這個action就會觸發所監聽的WechatSdkStore的onUpdateSignatureMap這個回調。

• class WechatSdkStore { constructor() { this.signatureMap = []; this.errorMessage = null; this.ready = false; this.bindActions(WechatSdkActions); this.exportAsync(WechatSdkSource);

⑤ react 父組件怎麼調用子組件的方法

可以通過向子組件傳入一個修改state的函數，比如如下代碼：
父組件：

class Father extends Component {
construtor(props){
super(props);
this.state={
name: 'Peter',
age: '26'
}
}
onChangeState(stateName){
this.setState(stateName)
}
render(){
<p>姓名：{this.state.name}</p>
<p>年齡：{this.state.age}</p>
<Child onClicked={this.onChangeState.bind(this)}/>
}
}

子組件：

class Child extends Component {
render(){
<Button onClicked={()=>this.props.onClicked({name: 'John'})}/>
}
}

⑥ react不用node開發環境 A. js文件怎麼調用其它B.js

node的作用是用來打包，本質是把A和B兩個文件打包進一個大文件。
不用node的話，你可以了解下RequireJs

⑦ react中怎麼調用別人的介面進行跳轉

RN自帶了一個非常優雅的網路操作庫fetch，下面的這個例子從gankio的介面拿到了美女圖片的url然後通過state 傳給列表組件，列表裡返回圖片組件顯示圖片。網路數據獲取方法寫在componentDidMount中，這個方法是組件生命周期中需要調用的一個方法。
class AwesomeProject extends Component {// 初始化模擬數據

constructor(props) {
super(props);

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => {r1 !== r2}});
this.state = {
dataSource: ds,
load:false,
text:''
};
}

//耗時操作放在這裡面
componentDidMount(){
this.getNet();
}

getNet(){
fetch('http://gank.io/api/search/query/listview/category/福利/count/10/page/1')//請求地址
.then((response) => response.json())//取數據
.then((responseText) => {//處理數據
//通過setState()方法重新渲染界面
this.setState({
//改變載入ListView
load: true,
//設置數據源刷新界面
dataSource: this.state.dataSource.cloneWithRows(responseText.results),
})

})
.catch((error) => {
console.warn(error);
}).done();
}

render() {
if(this.state.load){
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData)=>
<View>
<Image
style={{ width: 400, height: 250, marginTop: 5 }}
source={{uri:rowData.url}}/>
</View>}
/>
</View>
);
} else{
return(
<View>
<Text>loading......</Text>
</View>
);
}
}
}