溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“React中State與Props區(qū)別和用法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
在React當中，當你更新組件的state，然后新的state就會重新渲染到頁面中。在這個時候不需要你操作任何DOM。你也可以認為組件在React當中是一個狀態(tài)機（State Machines）。當用戶進行操作時會實現不同的狀態(tài)，然后再渲染到你的頁面中，讓你的頁面與數據始終保持一致。
如何定義State
定義一個合適的State，是正確創(chuàng)建組件的第一步。State必須能代表一個組件UI呈現的完整狀態(tài)集，即組件的任何UI改變，都可以從State的變化中反映出來；同時，State還必須是代表一個組件UI呈現的最小狀態(tài)集，即State中的所有狀態(tài)都是用于反映組件UI的變化，沒有任何多余的狀態(tài)，也不需要通過其他狀態(tài)計算而來的中間狀態(tài)。
組件中用到的一個變量是不是應該作為組件State，可以通過下面的4條依據進行判斷：
1.這個變量是否是通過Props從父組件中獲??？如果是，那么它不是一個狀態(tài)。
2.這個變量是否在組件的整個生命周期中都保持不變？如果是，那么它不是一個狀態(tài)。
3.這個變量是否可以通過其他狀態(tài)（State）或者屬性(Props)計算得到？如果是，那么它不是一個狀態(tài)。
4.這個變量是否在組件的render方法中使用？如果不是，那么它不是一個狀態(tài)。這種情況下，這個變量更適合定義為組件的一個普通屬性，例如組件中用到的定時器，就應該直接定義為this.timer，而不是this.state.timer。
如果對狀態(tài)不好理解的朋友，你可以認為狀態(tài)即是數據！
State 與 Props 區(qū)別
props 是組件對外的接口，state 是組件對內的接口。組件內可以引用其他組件，組件之間的引用形成了一個樹狀結構（組件樹），如果下層組件需要使用上層組件的數據或方法，上層組件就可以通過下層組件的props屬性進行傳遞，因此props是組件對外的接口。組件除了使用上層組件傳遞的數據外，自身也可能需要維護管理數據，這就是組件對內的接口state。根據對外接口props 和對內接口state，組件計算出對應界面的UI。
主要區(qū)別：
State是可變的，是一組用于反映組件UI變化的狀態(tài)集合；
而Props對于使用它的組件來說，是只讀的，要想修改Props，只能通過該組件的父組件修改。
在組件狀態(tài)上移的場景中，父組件正是通過子組件的Props, 傳遞給子組件其所需要的狀態(tài)
現在我們先來通過ES6類React.Component完成一個通過點擊按鈕對DIV進行顯示與隱藏的操作，效果如下：
咱們先將頁面進行初始化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#myDiv{
width:200px;
height:400px;
background:red;
color:yellow;
border:1px solid green;
}
</style>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script>
</head>
<body>
<div id="wrap"></div>
</body>
<script type="text/babel">
class MyComponent extends React.Component{
constructor(props){
super(props);
// 為當前狀態(tài)添加isShow屬性
this.state={
// 值為true顯示，false為隱藏。默認值為true。
isShow:true
}
}
render(){
//返回組件的初始內容
return <div>
<input type="button" value="顯示與隱藏"/>
<div id="myDiv">我在這里呀！</div>
</div>
}
}
ReactDOM.render(
<MyComponent/>,
document.querySelector("#wrap")
)
</script>
</html>到目前為止，頁面已經初始化完畢了。在上面的代碼中為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方法來進行設置。
第二件事是要為id為myDiv的DIV增加一個style屬性，該屬性要根據isShow的狀態(tài)來對DIV進行顯示與隱藏
注意：
1、style的值不要用雙引號，而是用{}，否則會報錯
最終版代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#myDiv{
width:200px;
height:400px;
background:red;
color:yellow;
border:1px solid green;
}
</style>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script>
</head>
<body>
<div id="wrap"></div>
</body>
<script type="text/babel">
class MyComponent extends React.Component{
constructor(props){
super(props);
// 為當前狀態(tài)添加isShow屬性
this.state={
// 值為true顯示，false為隱藏。默認值為true。
isShow:true
}
}
changeState(){
//此處不能直接修改isShow的值。而是需要借助setState方法！
this.setState({
//取反操作
isShow:!this.state.isShow
});
}
render(){
//返回組件的初始內容
return <div>
{/*在ES6的class中React是不會自動綁定this的，所以需要自己綁定*/}
<input type="button" value="顯示與隱藏" onClick={this.changeState.bind(this)} />
<div id="myDiv" style={{display:this.state.isShow?'block':'none'}}>
我在這里呀！
</div>
</div>
}
}
ReactDOM.render(
<MyComponent/>,
document.querySelector("#wrap")
)
</script>
</html>由上面的示例可以發(fā)現，當你改變isShow的狀態(tài)時，div也會發(fā)生相對應的變化！
“React中State與Props區(qū)別和用法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
