State屬性

state狀態

state 是組件內部的屬性。組件本事是一個狀態機，它可以在constructor中通過this.state直接定義它的值，然后根據這些值來渲染不同的UI。當state的值發生改變時，可以通過this.setState方法讓組件再次調用render方法，來渲染新的UI。當state的值發生改變時，可以通過this.setState方法再次調用render方法，來渲染新的UI。
state設計原則

什么組件應該有State，而且應該遵循最小化state的準則？那就是盡量讓大多數的組件都是無狀態的。為了實現這樣的結構，因該盡量把狀態分離在一些特定的組件中，來降低組件的復雜程度。最常見的做法就是創建盡力那個多的無狀態組件，這些組件唯一要關心的事情就是渲染數據。而在這些組件的外層，應該有一個包含state的父級的組件。這個組件用于處理各種事件、交流邏輯、修改state、對應的子組件要關心的只是傳入的屬性而已
state 應該包含什么數據？ state中應該包含組件的事件回調函數可能引發UI更新的這類數據。在實際的項目中，這些應該是輕量化的JSON數據，應該盡量把數據的表現設計到最小，而更多的數據可以在render方法通過各種計算來得到。這里舉一個例子，比如說現在有一個商品列表，還有一個用戶已經選購的商品列表，最直觀的設計方法如下：
{
goods:[
{
"id":1,
"name":"paper"
},
{
"id":2,
"name":"pencil"
}
...
],
selectedGoods:[
{
"id":1,
"name":"hello world"
}
],
}
這樣做當然可以，但根據最小化設計state原則，還是有更好的方法！！！
selectedGoods 的商品就是goods里面的幾項，數據是完全一致的，所以說這里只需要保存ID，就可以完成同樣的功能。所以可以修改成如下。
selectedGoods:[1,2,3]
在渲染這個組件的時候，只需要把要渲染的條目從goods中取出來就可以了。
state不應該包含什么數據？就像上面的例子所描述的一樣，為了達到state的最小化，下面?幾種數據不應該包含在state中
可以由state計算出的數據。就像selectedGoods一樣，可以由goods列表計算得出。
組件。組件不需要保存到state中，只需要在render方法中渲染。
props中的數據。props可以看作是組件的數據來源，它不需要保存在state中。
state 使用事例

import React from 'react';
export default class BodyIndex extends React.Component {
constructor() {
super(); //調用基類的所有的初始化方法
this.state = {
username: "Parry",
age:20
};//初始化賦值
}
render() {
setTimeout(() => {
//更改state的時候
this.setState({username: "IMOOC",age:30})
}, 4000);

return (<div><h2>頁面主題內容</h2><p>{this.state.username} {this.state.age}</p></div> )

}
}
可以用Chorme React組件中查看到state只會在相應的模塊中有值，不會影響到其他模塊。它屬于模塊自身屬性。

轉載于:https://www.cnblogs.com/ArielChen/p/7467586.html

總結

以上是生活随笔為你收集整理的State属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。