日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React中state屬性和生命周期的使用_React

作者：Han_Zhou_Z ? 更新時間： 2023-04-27 編程語言

一、React組件的state屬性和生命周期

當組件與用戶交互時,數據會發生變化，就要用到組件內的state屬性；當state值發生改變時 react會重新渲染(刷新)組件，從而保證UI界面和數據的一致

1、state的定義

this.state = {
	屬性名：值
}

2、更新狀態(state)

不能直接給狀態機中的屬性賦值，必須通過該方法來更新狀態機中的屬性值

this.setState({
	屬性名：新的屬性值
})

3、組件的生命周期

（1）掛載(mount)

當組件創建成功,并插入到DOM中。在掛載階段依次執行的方法如下：

①constructor() -- 構造方法重寫的前提

在 React 組件掛載之前，會調用它的構造函數。在為 React.Component 子類實現構造函數時，應該在其他語句之前調用 super(props)。

否則，this.props 在構造函數中可能會出現未定義的 bug

構造函數的兩種方法：

  • Ⅰ初始化對象的內部狀態：this.state = { }
  • Ⅱ為事件綁定某個實例時

在 constructor() 函數中不要調用 setState() 方法。如果你的組件需要使用內部 state，請直接在構造函數中為 this.state 賦值初始化state

②static getDerivedStateFromProps() -- 獲取組件的狀態值

③render() -- 渲染,是類組件中必須要實現的方法,該方法被調用時會檢查this.props和this.state的變化，是一個純函數:

  • Ⅰ在state不變的情況下,每次調用的返回結果都是一樣的
  • Ⅱ在React.Component類的子類中會重新定義(實現)
  • Ⅲ不會直接和瀏覽器進行交互

④componentDidMount() -- 掛載。組件插入到DOM樹之后立即調用

  • Ⅰ和瀏覽器進行交互
  • Ⅱ可以改變狀態值：調用setState方法
  • Ⅲ依賴于 DOM 節點的初始化應該放在這里

（2）案例（隱藏或顯示實時更新的計時器）

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
 
        //1.定義類組件
        class Clock extends React.Component{
            constructor(props){
                super(props)
                //定義狀態機并初始化
                this.state = {
                    date: new Date(),
                    show: true,
                    text: '隱藏'
                }
                //進行事件綁定：當某個事件被觸發時,調用誰的事件處理函數
                this.handleClickShow = this.handleClickShow.bind(this); //將事件處理函數綁定到this
                //  事件處理函數            后一個this代表當前這個示例
            }
            componentDidMount(){ //掛載完成后立即執行的函數:即頁面打開時就可以看到組件
               this.timerID = setInterval(  //this指的是當前這個對象，timeId就是個變量
                   ()=> this.tick(),        //setInterval是每間隔多久執行一次
                   1000                     //沒間隔1秒鐘，執行一次tick這個函數
                                            //根據狀態的變化，自動去調用這個函數
               )
            }
            componentWillUnmount(){ //組件卸載后關閉定時器
                clearInterval(this.timerID)
            }
            tick(){ //自定義方法：改變狀態機(改變狀態機中的屬性值)
               this.setState({//不能直接給狀態機中的屬性賦值,必須通過該方法來更新狀態機中的屬性值
                   date: new Date()
               })
            }
            handleClickShow(){  //當這個函數被調用，要改變show的和text兩個屬性
                this.setState(state=>({ //參數state表示以前的狀態 //這里的state指的是狀態機，將原來state的狀態值取出來，作為參數傳給setState
                    show: !state.show,  //取反state.show
                    text: !state.show?'隱藏':'顯示'  //取反為真，放隱藏，取反為假，放顯示
                }))
            }
            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.handleClickShow }>{this.state.text}計時器</button>//花括號里面的內容會被直接執行
                      <br />
                      { element }
                    </div>
                )
            }
        }
        //2.渲染
        ReactDOM.render(<Clock />,root)
    </script>
</body>

?注意：代碼后面的注釋需要認真閱讀，對每一個方法的解釋

（3）更新(update)

當組件的props或state發生改變時，就會觸發更新操作。在更新階段調用的函數如下：

  • ①static getDerivedStateFromProps()
  • ②shouldComponentUpdate()
  • ③render()-- 重新渲染
  • ④getSnapshotBeforeUpdate()
  • ⑤componentDidUpdate()-- 組件更新后立即調用

Ⅰ、componentDidUpdate(prevProps, prevState, snapshot)：會在更新后會被立即調用。

首次渲染不會執行此方法。當組件更新后，可以在此處對 DOM 進行操作。

如果你對更新前后的 props 進行了比較，也可以選擇在此處進行網絡請求。

也可以在 componentDidUpdate() 中直接調用 setState()，但請注意它必須被包裹在一個條件語句里，正如上述的例子那樣進行處理，否則會導致死循環。它還會導致額外的重新渲染，雖然用戶不可見，但會影響組件性能。

（4）卸載(unmount)

當組件從DOM中移除時。卸載時調用的函數是

componentWillUnmount()：會在組件卸載及銷毀之前直接調用。在此方法中執行必要的清理操作，例如，清除timer，取消網絡請求或清除在 componentDidMount() 中創建的訂閱等。

componentWillUnmount() 中不應調用 setState()，因為該組件將永遠不會重新渲染。組件實例卸載后，將永遠不會再掛載它。

總結

原文鏈接：https://blog.csdn.net/Han_Zhou_Z/article/details/123322218

欄目分類
最近更新