聲明周期與組件卸載

• props配置：使用組件時(shí)傳入數(shù)據(jù)
• state私有數(shù)據(jù)：組件內(nèi)部使用的數(shù)據(jù)

state的使用注意事項(xiàng)

必須使用setState方法來(lái)更改state

多個(gè)setState會(huì)合并調(diào)用

props和state更新數(shù)據(jù)要謹(jǐn)慎（有可能在異步程序中更新）

setState操作合并的原理：淺合并，即設(shè)置什么屬性就更新什么，最終再合并成一個(gè)state

// 不要這樣去更新 this.setState({result: this.state.result + this.props.content }) // 使用這種方式 this.setState((state, props) => {// state 上一個(gè)state// porps 此次更新時(shí)被使用的propsstate.result = state.result + props.content }) // 設(shè)置arr，用一個(gè)全新的數(shù)組替換，而不再使用原先的引用 this.setState({arr: [...this.state.arr, 4]// or用數(shù)組的concat方法返回新數(shù)組 })

• state是組件內(nèi)部特有的數(shù)據(jù)封裝
• 其他組件無(wú)法讀寫(xiě)該組件的state
• 組價(jià)可以通過(guò)其他組件調(diào)用時(shí)傳入的屬性來(lái)傳遞state的值
• props雖然是響應(yīng)式的，但在組件內(nèi)部是只讀的
• state只能傳遞給自己的子組件（state的安全影響范圍）
• 組件可以沒(méi)有狀態(tài)
• 組件有無(wú)狀態(tài)可以切換（原先無(wú)狀態(tài)，在生命周期函數(shù)/綁定的時(shí)間處理函數(shù)中增加狀態(tài)）
• 總結(jié)：這種數(shù)據(jù)（狀態(tài)）從父到子，由上而下傳遞的方式叫單向數(shù)據(jù)流

class MyTime extends React.Component {constructor(props) {super(props)}state = {time: new Date().toString()}// 組件已經(jīng)被渲染到了DOM中，運(yùn)行的函數(shù)componentDidMount() {this.t = setInterval(() => {this.setState({time: new Date().toString()})}, 1000)}// 組件即將被卸載時(shí)componentWillUnmount() {clearInterval(this.t)this.t = nullconsole.log('over')}render() {return (<div><h1>{this.state.time}</h1></div>)} } ReactDOM.render(<MyTime />,document.getElementById('app') ) setTimeout(() => {ReactDOM.unmountComponentAtNode(document.getElementById('app')) }, 3000)

總結(jié)

以上是生活随笔為你收集整理的05 state与setState、单向数据流的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。