React中State與Props區(qū)別和用法

本篇內(nèi)容介紹了“React中State與Props區(qū)別和用法”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了宜昌免費建站歡迎大家使用！

在React當中，當你更新組件的state，然后新的state就會重新渲染到頁面中。在這個時候不需要你操作任何DOM。你也可以認為組件在React當中是一個狀態(tài)機（State Machines）。當用戶進行操作時會實現(xiàn)不同的狀態(tài)，然后再渲染到你的頁面中，讓你的頁面與數(shù)據(jù)始終保持一致。

如何定義State

定義一個合適的State，是正確創(chuàng)建組件的第一步。State必須能代表一個組件UI呈現(xiàn)的完整狀態(tài)集，即組件的任何UI改變，都可以從State的變化中反映出來；同時，State還必須是代表一個組件UI呈現(xiàn)的最小狀態(tài)集，即State中的所有狀態(tài)都是用于反映組件UI的變化，沒有任何多余的狀態(tài)，也不需要通過其他狀態(tài)計算而來的中間狀態(tài)。

組件中用到的一個變量是不是應(yīng)該作為組件State，可以通過下面的4條依據(jù)進行判斷：

1.這個變量是否是通過Props從父組件中獲??？如果是，那么它不是一個狀態(tài)。

2.這個變量是否在組件的整個生命周期中都保持不變？如果是，那么它不是一個狀態(tài)。

3.這個變量是否可以通過其他狀態(tài)（State）或者屬性(Props)計算得到？如果是，那么它不是一個狀態(tài)。

4.這個變量是否在組件的render方法中使用？如果不是，那么它不是一個狀態(tài)。這種情況下，這個變量更適合定義為組件的一個普通屬性，例如組件中用到的定時器，就應(yīng)該直接定義為this.timer，而不是this.state.timer。

如果對狀態(tài)不好理解的朋友，你可以認為狀態(tài)即是數(shù)據(jù)！

State 與 Props 區(qū)別

props 是組件對外的接口，state 是組件對內(nèi)的接口。組件內(nèi)可以引用其他組件，組件之間的引用形成了一個樹狀結(jié)構(gòu)（組件樹），如果下層組件需要使用上層組件的數(shù)據(jù)或方法，上層組件就可以通過下層組件的props屬性進行傳遞，因此props是組件對外的接口。組件除了使用上層組件傳遞的數(shù)據(jù)外，自身也可能需要維護管理數(shù)據(jù)，這就是組件對內(nèi)的接口state。根據(jù)對外接口props 和對內(nèi)接口state，組件計算出對應(yīng)界面的UI。

主要區(qū)別：

State是可變的，是一組用于反映組件UI變化的狀態(tài)集合；
而Props對于使用它的組件來說，是只讀的，要想修改Props，只能通過該組件的父組件修改。
在組件狀態(tài)上移的場景中，父組件正是通過子組件的Props, 傳遞給子組件其所需要的狀態(tài)

現(xiàn)在我們先來通過ES6類React.Component完成一個通過點擊按鈕對DIV進行顯示與隱藏的操作，效果如下：

React中State與Props區(qū)別和用法

咱們先將頁面進行初始化：




  
  Title

class MyComponent extends React.Component{ constructor(props){ super(props); // 為當前狀態(tài)添加isShow屬性 this.state={ // 值為true顯示，false為隱藏。默認值為true。 isShow:true } } render(){ //返回組件的初始內(nèi)容 return

我在這里呀！

} } ReactDOM.render( , document.querySelector("#wrap") )

到目前為止，頁面已經(jīng)初始化完畢了。在上面的代碼中為state添加了一個默認值為true的屬性isShow。isShow用來控制div的顯示與隱藏！當isShow為true時顯示，為false時隱藏

接下來要完成的二件事。

第一件事是要為按鈕增加一個點擊事件，事件與changeState方法進行綁定。當點擊按鈕時改變isShow的狀態(tài)，也就是要為 isShow進行取反操作。

注意：

1、onClick中的c要大寫。
2、onClick后跟的方法不要用引號包裹，而是用{}
3、在ES6的class中React是不會自動綁定this的，所以需要自己通過bind綁定。
4、changeState方法中，不能直接修改isShow的值，而是需要借助setState方法來進行設(shè)置。

第二件事是要為id為myDiv的DIV增加一個style屬性，該屬性要根據(jù)isShow的狀態(tài)來對DIV進行顯示與隱藏

注意：

1、style的值不要用雙引號，而是用{}，否則會報錯

最終版代碼：




  
  Title

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

React中State與Props區(qū)別和用法

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管