資訊專欄INFORMATION COLUMN
摘要：整理一下中關(guān)于和的知識(shí)點(diǎn)。在任何應(yīng)用中，數(shù)據(jù)都是必不可少的。比如，這樣關(guān)于，可以聲明為以下幾種類型注意，和是簡(jiǎn)寫。是什么呢一個(gè)組件的顯示形態(tài)可以由數(shù)據(jù)狀態(tài)和外部參數(shù)所決定，外部參數(shù)也就是，而數(shù)據(jù)狀態(tài)就是。
整理一下React中關(guān)于state和props的知識(shí)點(diǎn)。
在任何應(yīng)用中，數(shù)據(jù)都是必不可少的。我們需要直接的改變頁(yè)面上一塊的區(qū)域來(lái)使得視圖的刷新，或者間接地改變其他地方的數(shù)據(jù)。React的數(shù)據(jù)是自頂向下單向流動(dòng)的，即從父組件到子組件中，組件的數(shù)據(jù)存儲(chǔ)在props和state中，這兩個(gè)屬性有啥子區(qū)別呢？
propsReact的核心思想就是組件化思想，頁(yè)面會(huì)被切分成一些獨(dú)立的、可復(fù)用的組件。
組件從概念上看就是一個(gè)函數(shù)，可以接受一個(gè)參數(shù)作為輸入值，這個(gè)參數(shù)就是props，所以可以把props理解為從外部傳入組件內(nèi)部的數(shù)據(jù)。由于React是單向數(shù)據(jù)流，所以props基本上也就是從服父級(jí)組件向子組件傳遞的數(shù)據(jù)。
用法假設(shè)我們現(xiàn)在需要實(shí)現(xiàn)一個(gè)列表，根據(jù)React組件化思想，我們可以把列表中的行當(dāng)做一個(gè)組件，也就是有這樣兩個(gè)組件：
先看看
import Item from "./item";
export default class ItemList extends React.Component{
const itemList = data.map(item =>
列表的數(shù)據(jù)我們就暫時(shí)先假設(shè)是放在一個(gè)data變量中，然后通過(guò)map函數(shù)返回一個(gè)每一項(xiàng)都是
在
export default class Item extends React.Component{
render(){
return (
在render函數(shù)中可以看出，組件內(nèi)部是使用this.props來(lái)獲取傳遞到該組件的所有數(shù)據(jù)，它是一個(gè)對(duì)象，包含了所有你對(duì)這個(gè)組件的配置，現(xiàn)在只包含了一個(gè)item屬性，所以通過(guò)this.props.item來(lái)獲取即可。
只讀性props經(jīng)常被用作渲染組件和初始化狀態(tài)，當(dāng)一個(gè)組件被實(shí)例化之后，它的props是只讀的，不可改變的。如果props在渲染過(guò)程中可以被改變，會(huì)導(dǎo)致這個(gè)組件顯示的形態(tài)變得不可預(yù)測(cè)。只有通過(guò)父組件重新渲染的方式才可以把新的props傳入組件中。
默認(rèn)參數(shù)在組件中，我們最好為props中的參數(shù)設(shè)置一個(gè)defaultProps，并且制定它的類型。比如，這樣：
Item.defaultProps = {
item: "Hello Props",
};
Item.propTypes = {
item: PropTypes.string,
};
關(guān)于propTypes，可以聲明為以下幾種類型：
optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, optionalNumber: PropTypes.number, optionalObject: PropTypes.object, optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol,
注意，bool和func是簡(jiǎn)寫。
這些知識(shí)基礎(chǔ)數(shù)據(jù)類型，還有一些復(fù)雜的，附上鏈接：
https://facebook.github.io/react/docs/typechecking-with-proptypes.html
總結(jié)props是一個(gè)從外部傳進(jìn)組件的參數(shù)，主要作為就是從父組件向子組件傳遞數(shù)據(jù)，它具有可讀性和不變性，只能通過(guò)外部組件主動(dòng)傳入新的props來(lái)重新渲染子組件，否則子組件的props以及展現(xiàn)形式不會(huì)改變。
statestate是什么呢？
State is similar to props, but it is private and fully controlled by the component.
一個(gè)組件的顯示形態(tài)可以由數(shù)據(jù)狀態(tài)和外部參數(shù)所決定，外部參數(shù)也就是props，而數(shù)據(jù)狀態(tài)就是state。
用法export default class ItemList extends React.Component{
constructor(){
super();
this.state = {
itemList:"一些數(shù)據(jù)",
}
}
render(){
return (
{this.state.itemList}
)
}
}
首先，在組件初始化的時(shí)候，通過(guò)this.state給組件設(shè)定一個(gè)初始的state，在第一次render的時(shí)候就會(huì)用這個(gè)數(shù)據(jù)來(lái)渲染組件。
setStatestate不同于props的一點(diǎn)是，state是可以被改變的。不過(guò)，不可以直接通過(guò)this.state=的方式來(lái)修改，而需要通過(guò)this.setState()方法來(lái)修改state。
比如，我們經(jīng)常會(huì)通過(guò)異步操作來(lái)獲取數(shù)據(jù)，我們需要在didMount階段來(lái)執(zhí)行異步操作：
componentDidMount(){
fetch("url")
.then(response => response.json())
.then((data) => {
this.setState({itemList:item});
}
}
當(dāng)數(shù)據(jù)獲取完成后，通過(guò)this.setState來(lái)修改數(shù)據(jù)狀態(tài)。
當(dāng)我們調(diào)用this.setState方法時(shí)，React會(huì)更新組件的數(shù)據(jù)狀態(tài)state，并且重新調(diào)用render方法，也就是會(huì)對(duì)組件進(jìn)行重新渲染。
注意：通過(guò)this.state=來(lái)初始化state，使用this.setState來(lái)修改state，constructor是唯一能夠初始化的地方。
setState接受一個(gè)對(duì)象或者函數(shù)作為第一個(gè)參數(shù)，只需要傳入需要更新的部分即可，不需要傳入整個(gè)對(duì)象，比如：
export default class ItemList extends React.Component{
constructor(){
super();
this.state = {
name:"axuebin",
age:25,
}
}
componentDidMount(){
this.setState({age:18})
}
}
在執(zhí)行完setState之后的state應(yīng)該是{name:"axuebin",age:18}。
setState還可以接受第二個(gè)參數(shù)，它是一個(gè)函數(shù)，會(huì)在setState調(diào)用完成并且組件開(kāi)始重新渲染時(shí)被調(diào)用，可以用來(lái)監(jiān)聽(tīng)渲染是否完成：
this.setState({
name:"xb"
},()=>console.log("setState finished"))
總結(jié)
state的主要作用是用于組件保存、控制以及修改自己的狀態(tài)，它只能在constructor中初始化，它算是組件的私有屬性，不可通過(guò)外部訪問(wèn)和修改，只能通過(guò)組件內(nèi)部的this.setState來(lái)修改，修改state屬性會(huì)導(dǎo)致組件的重新渲染。
區(qū)別state是組件自己管理數(shù)據(jù)，控制自己的狀態(tài)，可變；
props是外部傳入的數(shù)據(jù)參數(shù)，不可變；
沒(méi)有state的叫做無(wú)狀態(tài)組件，有state的叫做有狀態(tài)組件；
多用props，少用state。也就是多寫無(wú)狀態(tài)組件。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91832.html
摘要：?jiǎn)l(fā)式算法了解一下什么是啟發(fā)式算法啟發(fā)式算法指人在解決問(wèn)題時(shí)所采取的一種根據(jù)經(jīng)驗(yàn)規(guī)則進(jìn)行發(fā)現(xiàn)的方法。這將會(huì)造成極大的性能損失和組件內(nèi)的丟失。但這都是的內(nèi)部實(shí)現(xiàn)方式，可能在后序的版本中不斷細(xì)化啟發(fā)式算法，甚至采用別的啟發(fā)式算法。 首先歡迎大家關(guān)注我的掘金賬號(hào)和Github博客，也算是對(duì)我的一點(diǎn)鼓勵(lì)，畢竟寫東西沒(méi)法獲得變現(xiàn)，能堅(jiān)持下去也是靠的是自己的熱情和大家的鼓勵(lì)。 大家在使用R...
摘要：用這種方式創(chuàng)建組件時(shí)，并沒(méi)有對(duì)內(nèi)部的函數(shù)，進(jìn)行綁定，所以如果你想讓函數(shù)在回調(diào)中保持正確的，就要手動(dòng)對(duì)需要的函數(shù)進(jìn)行綁定，如上面的，在構(gòu)造函數(shù)中對(duì)進(jìn)行了綁定。 當(dāng)我們談起React的時(shí)候，多半會(huì)將注意力集中在組件之上，思考如何將頁(yè)面劃分成一個(gè)個(gè)組件，以及如何編寫可復(fù)用的組件。但對(duì)于接觸React不久，還沒(méi)有真正用它做一個(gè)完整項(xiàng)目的人來(lái)說(shuō)，理解如何創(chuàng)建一個(gè)組件也并不那么簡(jiǎn)單。在最開(kāi)始的時(shí)候...
摘要：屬性如何獲取，是容器性組件負(fù)責(zé)的事情。所以，不要依賴和的值計(jì)算下一個(gè)狀態(tài)。也可以使用帶用回調(diào)函數(shù)參數(shù)版本的，回調(diào)函數(shù)中的會(huì)保證是最新的。當(dāng)返回時(shí)，組件本次的方法不會(huì)被觸發(fā)。 容器性組件（container component）和展示性組件（presentational component） 使用React編寫組件時(shí)，我們需要有意識(shí)地將組件劃分為容器性組件（container compo...
摘要：但這并不是最佳的方式。最佳的方式是使用提供的和方法。也就是說(shuō)，與的與完全無(wú)關(guān)。另外，如果使用對(duì)做屬性類型檢查，方法和方法為添加的屬性是存在的。注意，的變化不會(huì)引起上述過(guò)程，默認(rèn)在組件的生命周期中是固定的。 轉(zhuǎn)載注： 本文作者是淘寶前端團(tuán)隊(duì)的葉齋。筆者非常喜歡這篇文章，故重新排版并轉(zhuǎn)載到這里，同時(shí)也加入了一些自己的體會(huì)。 原文地址：http://taobaofed.org/blog/...
摘要：就是那個(gè)將要全權(quán)代管你所有組件的那家伙用的自述來(lái)說(shuō)就是是狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理。 你若裝逼，請(qǐng)帶我飛！ I love React ! 從前，從前，聽(tīng)說(shuō)React只負(fù)責(zé)UI，話說(shuō)寫Angular代碼就像寫后端，現(xiàn)在看來(lái)，React贏在情懷上了； 我認(rèn)為沒(méi)必要老是拿React和Angular做比較，Angular是一套大而全的相對(duì)完備的框架；而React確實(shí)是只負(fù)責(zé)UI，只是多出...
閱讀 1623·2023-04-25 14:12
閱讀 1097·2021-08-27 16:24
閱讀 2546·2019-08-30 15:44
閱讀 2926·2019-08-30 13:16
閱讀 1681·2019-08-29 14:10
閱讀 977·2019-08-29 13:54
閱讀 1311·2019-08-29 13:09
閱讀 1822·2019-08-26 18:37
