React State狀態(tài)與生命周期的實現(xiàn)方法

更新時間：2021年03月23日 10:08:41 作者：一枚小棋子

這篇文章主要介紹了React State狀態(tài)與生命周期的實現(xiàn)方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

一、實現(xiàn)組件的方法:

組件名稱首字母必須大寫

1.通過JS函數(shù)方式實現(xiàn)組件

<div id="app"></div>
<script type="text/babel">
  var ReactDiv = document.getElementById('app');
  function GetReactComp(){
    return <p>我是react組件</p>
  }
  const hellocomp = < GetReactComp />  //首字母大寫
  const reactSpan = (
    <span>
      { hellocomp }
    </span>
  )
  ReactDOM.render(reactSpan,ReactDiv)
</script>

2.通過ES6 class實現(xiàn)組件

<div id="class"></div>
<script type="text/babel">
  var reactDiv1=document.getElementById('class');
  //定義類組件
  class MyReactComp extends React.Component{
    render(){
      return (
        <h2>類組件</h2>
      )
    }
  }
  //使用類組件
  const testDiv = (
    <div>{<MyReactComp/>}</div>
  )
	//掛載
  ReactDOM.render(testDiv,reactDiv1)
</script>

二、props組件傳值

React對props有嚴格的保護機制，一旦給定值，在組件中不允許被改變。

<div id="app"></div>
<script type="text/babel">
  var reactDiv = document.getElementById('app');
  class ReactClassComp extends React.Component {
    render(){
      return (
      <div>
      <p>用戶名：<input type="text" value={ this.props.name }/></p>
      <p>性別：<input type="text" value={ this.props.gender }/></p>
      </div>
      )
    }
  }

  ReactClassComp.defaultProps={
    name:'劉備',
    gender:'男'
  }
  const reactp=(
    <span>
      {<ReactClassComp />}  
    </span>
  )
  ReactDOM.render(reactp,reactDiv)
</script>

在這里插入圖片描述

注意：在很多場合中，組件的內(nèi)容需要根據(jù)數(shù)據(jù)的刷新而刷新，這個時候就需要用到React提供的State

三、State狀態(tài)

React將組件看作是狀態(tài)機，通過內(nèi)部定義的狀態(tài)與生命周期實現(xiàn)與用戶的交互，維持組建的不同狀態(tài)，然后通過渲染UI保證用戶界面和數(shù)據(jù)一致性。
創(chuàng)建方式：利用ES6的class繼承方法super，可以將props傳遞到React.Component的構(gòu)造函數(shù)中。

1.React生命周期掛載（mount）：

當組件實例被創(chuàng)建并插入DOM中時

（1）constructor(props) -->在組件掛載之前，會調(diào)用它的構(gòu)造函數(shù)。如果不需要初始化state或不進行方法綁定，則不需要創(chuàng)建構(gòu)造函數(shù)。

構(gòu)造函數(shù)僅用于以下兩種情況：

通過給this.state賦值對象來初始化內(nèi)部state
為事件處理函數(shù)綁定實例

注意：在constructor()函數(shù)中不要調(diào)用setState()方法。如果需要使用內(nèi)部state，可直接在構(gòu)造函數(shù)中為this.state賦值初始化state.

constructor(props){
	super(props)；
		this.state = {
			date:new Date()
		}
		this.handleShow = this.handleShow.bind(this)
	
}

（2） render() -->必須要實現(xiàn)的

會檢查this.props和this.state的變化并返回以下類型之一：

React元素：通常通過JSX創(chuàng)建
數(shù)組或fragments：返回多個
Portals：可以渲染節(jié)點到不同的DOM子樹中
字符串或數(shù)值類型：被渲染為文本節(jié)點
布爾類型或null：什么都不渲染

純函數(shù)：在不修改組件state的情況下，每次調(diào)用都返回相同的結(jié)果，并且它不會直接與瀏覽器交互。
如果需與瀏覽器進行交互，在ComponmentDidMount()或其他生命周期中進行定義

（3） ComponmentDidMount() -->在組件掛載后立即調(diào)用。

依賴DOM節(jié)點的初始化
實例化網(wǎng)絡請求獲取數(shù)據(jù)
添加訂閱，需要在componentWillUnmount()中取消訂閱

注意：可以在ComponmentDidMount()中直接調(diào)用setState()。它將觸發(fā)額外渲染，但此渲染會發(fā)生在瀏覽器更新屏幕之前。保證了即使在render()兩次調(diào)用的情況下，用戶不會看到中間狀態(tài)。

更新：

compomentDidUpdate(prevProps,prevProps,snapshot)：更新后立即調(diào)用，首次渲染不會執(zhí)行此方法，當組件更新后，可以在此處對DOM進行操作。

compomentDidUpdate(prevProps){
	if(this.props.userID !== prevProps.userID){
		this.fetchData(this.props.userID)
	}
}

注意：若在compomentDidUpdate() 調(diào)用setState()，需要包裹在一個條件語句中，否則會導致死循環(huán)。還會導致額外的重新渲染，雖然用戶不可見，但會影響組件性能。

卸載:

componentWillUnmount() -->在組件卸載及銷毀之前直接調(diào)用。
注意： componentWillUnmount()中不應調(diào)用setState()方法，因為組件將永遠不會重新渲染。組件實例卸載后，將永遠不會再掛載它。

2.生命周期實例-->時鐘：

<div id="app"></div>
<script type="text/babel">
  var reactDiv = document.getElementById('app')
  //定義類組件 MyStateComp 
  class MyStateComp extends React.Component {
    //構(gòu)造函數(shù)
    constructor(props) {
      super(props); 
      //通過this.state初始化state內(nèi)部
      this.state = {
        date:new Date(),
        show:false,
        text:'顯示'
      }
      //為事件處理函數(shù)綁定實例
      this.handleShow = this.handleShow.bind(this)
    }
    //添加訂閱
    componentDidMount() {
      this.timerID = setInterval(()=>this.tick(),1000)
    }
    //時間函數(shù)
    tick() {
      this.setState({  //setState更新組件的state
        date:new Date()
      })
    }
    //實例顯示、隱藏
    handleShow() {
      this.setState(state=>({
        show: !state.show,
        text: !state.show?'隱藏':'顯示'
      }))
    }
    //組件卸載：清空定時器
    componentWillUnmont() {
      clearInterval(this.timerID)
    }
    
    render() {
      let isShow=this.state.show;
      let element;
      if(isShow){
        element = <h2 >{this.state.date.toLocaleTimeString()}</h2> 
      }else{
        element = null
      }
      return (
        <div>
          <button onClick={this.handleShow}>{this.state.text}時間</button>
          {element}
        </div>
      )
    }
  }
  const reactSpan = (
    <span>
      {<MyStateComp/> }  
    </span>
  )
  ReactDOM.render(reactSpan,reactDiv)
</script>

在這里插入圖片描述