組件狀態

事件 ?

（事件名大寫）

注意：組件事件需要配合狀態，所以現在無法呈現效果

class Cmp1 extends React.Component{constructor(...args){super(..args);this.a=0;//要用狀態，屬性不行，props也不行}add(){this.a++;//這個函數會執行，a也會變，但是不會重新渲染alert(this.a);}render(){return <div>//強制綁定add的this<input type="button" value="加1" onClick={this.add.bind(this)} /></div>} } 復制代碼

a其實變了，但是只有狀態改變能引發重新渲染

狀態

組件的狀態非常有用

• 屬性是只讀，狀態是可變的
• 狀態改變，組件會重新渲染（父級屬性變化，強制刷新也可以引起重新渲染）
  • 引起組件重新渲染的條件
    • state
    • props
    • 強制渲染. ? this.forceUpdate()

class Cmp1 entends React.Component{constructor(...args){super(...args);//狀態初始化this.state={a:0}}add(){//修改狀態this.setState({a:this.state.a+1})}render(){return <div>//強制綁定add的this<input type="button" value="+1" onClick={this.add.bind(this)} />{this.state.a}</div>} } let comp=<Cmp1></Cmp1> ReactDOM.render(comp,root)復制代碼

注意??：

• 狀態的初始化只能放在constructor中完成
• 必須通過setState修改狀態，否則也不能重新渲染——其實是setState在調用render

props變化引起的重新渲染

class Parent extends React.Component{constructor(...args){super(...args);this.state={a:0}}render(){return <div><input type="button" value="+1" onClick={function(){this.setState({a:this.state.a+1})}.bind(this)} /><Child a={this.state.a} /></div>} } class Child extends React.Component{constructor(...args){super(...args);}render(){return <div>{this.props.a}</div>} } 復制代碼

強制渲染(forceUpdate)

class Cmp1 extends React.Component{constructor(.;..args){super(...args);this.a=12;}fn(){this.a++//強制渲染this.forceUpdate(); }render(){return <div><input type="button" value="+1" onClick={this.fn.bind(this)} />{this.a}</div>} } 復制代碼

強制重新渲染會打亂React自身的渲染計劃，輕則影響性能，重則引發錯誤，極少使用

組件生存周期

從組件創建到銷毀的整個過程

上圖中，涉及最重要的兩個鉤子函數，componentDidMount(組件已掛載)和componentDidUpdate(組件已更新）

完整的生命周期鉤子函數

創建階段(mount)

constructor:構造函數，這時還不算是個組件，只是class自身的初始化

getDerivedStateFromProps:檢查需要更新的狀態(一個檢查函數，不是鉤子函數，檢查更新，一般不做改變)

render:初始渲染

componentDidMount:組件創建完成，并已掛載到DOM結構中

更新階段(update)

getDerivedStateFromProps:檢查

shouldComponentUpdate:確定組件是否需要更新 ?（重要)有兩個參數(nextProps，nextState)

render

getSnapshoutBeforeUpdate：更新前保存DOM狀態

compomentDidUpdate：組件已渲染完成

阻止更新

shouldComponentUpdata(nextProps,nextState){ //當前狀態（變化前），新狀態（變化后）this.state.nextState//當前屬性，新屬性this.props.nextPropsreturn true -允許更新/。 false -拒絕更新 }復制代碼

使用實例：阻止循環update

class Parent entends React.Component{constructor(...args){super(..args);this.state={id:1}}next(){this.setState{id:this.state.id+1}}render(){return {<div><input type="button" value="下一個" onClick={this.next.bind(this)}/><Child id={this.state.id}/></div>}} } class Child extends React.Component{constructor(..args){super(...args);this.state={name:'',age:''}}shouledComponentUpdata(nextProps,nextState){//console.log(nextProps,this.props);renturn{//條件1:屬性變了（來自父級）nextProps.id!=this.props.id||//條件2:狀態變了（來自自己）nextState.name!=this.state.name};}loadData(id){fetch(`data/data${id}.txt`).then(res=>{res.json().then(data=>{this.setState(data);});});}componentDidMount(){console.log('初始:‘,this.props.id);this.loadData(this.props.id)}componentDidUpdate(){console.log('更新‘,this.props.id)this.loadData(this.props.id);}render(){console.log('渲染‘）；return (<div>ID:{this.props.id}<br/>用戶名：{this.state.name},年齡：{this.state.age}</div>)} }復制代碼

銷毀階段（Unmount）

• componentWillUnmount:組織已銷毀

銷毀操作無法阻止

轉載于:https://juejin.im/post/5cee854a518825155a23237d

總結

以上是生活随笔為你收集整理的React组件-事件、状态和生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。

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