<b id="wionh"></b>

<u id="wionh"><address id="wionh"><meter id="wionh"></meter></address></u>

React組件的生命周期的使用

時間:2023-02-01 22:00:21 類型:React
字號:    

對生命周期的理解:

       1, 組件從創建到死亡,它會經歷一些特定的階段

       2, React組件包含一系列鉤子函數(生命周期回調函數),會在特定的時刻被調用

      3, 我們在定義組件時,會在特定的生命周期回調函數中,做特定的工作

頁面最后有對生命周期使用的總結:


生命周期圖02.png

//1. 創建類式組件
        //生命周期回調函數 <=> 生命周期鉤子函數 <=> 生命周期函數 <=> 生命周期鉤子
        //對生命周期的理解:
        //1, 組件從創建到死亡,它會經歷一些特定的階段
        //2, React組件包含一系列鉤子函數(生命周期回調函數),會在特定的時刻被調用
        //3, 我們在定義組件時,會在特定的生命周期回調函數中,做特定的工作
        class Life extends React.Component{
            //初始化狀態
            state = {opacity:1}
            //組件掛載完畢
            componentDidMount(){
                this.timer = setInterval(()=>{
                    let {opacity} = this.state
                    opacity -= 0.1
                   
                    if(opacity <= 0) {
                        console.log(opacity);
                        opacity = 1
                    }
                    console.log(opacity);
                    this.setState({opacity:opacity})
                },1000)
            }
            componentWillUnmount(){
                clearInterval(this.timer);
            }
            //調用時機: 初始化渲染,狀態更新之后
            render() {
                //render 調用幾次  1 + n(第一次渲染,然后當 state狀態更新時,所以這里每當state更新一次,就會再次一次)
                //所以把setInterval放在這里不合適
                /* setInterval(()=>{
                    let {opacity} = this.state
                    opacity -= 0.1
                    
                    if(opacity <= 0) {
                        console.log(opacity);
                        opacity = 1
                    }
                    console.log(opacity);
                    this.setState({opacity:opacity})
                },1000) */
                return (
                    <div>
                        <h1 style={{opacity:this.state.opacity}}>學不會, 怎么辦</h1>
                        <button onClick={this.die}>不活了</button>
                    </div>
                )
            }
            die = (event)=>{
                //console.log(event.target);
                //卸載組件
                ReactDOM.unmountComponentAtNode(document.getElementById("test"));
            }
        }
        ReactDOM.render(<Life/>,document.getElementById("test"))

舊的生命周期的調用

 class Count extends React.Component{
            state = {count:0}
            //生命周期函數 掛載時如下
            //1, constructor(構造器)
            //2, componentWillMount(組件將要掛載)
            //構造器
            constructor(props){
                console.log("Count---constructor");
                super(props)
            }
            //組件將要掛載的鉤子
            componentWillMount(){
                console.log("Count---componentWillMount");
            }
            //組件掛載完畢的鉤子
            componentDidMount(){
                console.log("Count---componentDidMount");
            }
           
            componentWillUnmount(){
                console.log("Count---componentWillUnmount");
            }

            //組件是否應該更新(true---go,false---stop) 默認返回true
            shouldComponentUpdate(){
                console.log("Count---shouleComponentUpdate");
                return true
                //如果是false, 就不再往下走了
            }
            //組件將要更新的鉤子
            componentWillUpdate(){
                console.log("Count---componentWillUpdate");
            }
            //組件更新完畢
            componentDidUpdate(){
                console.log("Count---componentDidUpdate");
            }
            render(){
                console.log("Count---render");
                return (
                    <div>
                        <h1>當前的統計總數為: {this.state.count}</h1>
                        <button onClick={this.add}>點擊+1</button>
                        <button onClick={this.die}>卸載組件</button>
                        <button onClick={this.force}>不更改任何狀態值,強制更新一下</button>
                    </div>
                )
            }
            add = ()=>{
                const {count} = this.state
                this.setState({count:count+1})
            }
            //卸載組件按鈕的回調
            die = ()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById("test"))
            }
            force = ()=>{
                this.forceUpdate();
            }
        }
        ReactDOM.render(<Count/>,document.getElementById("test"))

父子組件的調用:

class Parent extends React.Component{
            //初始化狀態值
            state = {carName:"寶馬"}
            //更換車
            changeCar = () =>{
                this.setState({carName:"奧拓"})
            }
            render(){
                return (
                    <div>
                         <h1>我是父組件</h1>
                         <button onClick={this.changeCar}>換車</button>
                         <Child carName={this.state.carName} />
                    </div>
                )
            }
        }
        class Child extends React.Component{
            //componentWillReceiveProps 第一次接收 屬性值 不執行
            componentWillReceiveProps(props){
                console.log("子組件",'componentWillReceiveProps',props);
            }
            shouldComponentUpdate(){
                console.log("是否Ok",'shouldComponentUpdate');
                return true;
            }
            componentWillUpdate(){
                console.log("子組件",'compoentWillUpdate');
            }
            componentDidUpdate(){
                console.log("子組件","componentDidUpdate");
            }
            render(){
                console.log('子組件渲染');
                return (
                    <div>
                        我是子組件,接收到汽車是 {this.props.carName}
                    </div>
                )
            }
        }
        ReactDOM.render(<Parent/>, document.getElementById("test"))

新版本的生命周期

生命周期圖(新).png

class Count extends React.Component{
            state = {count:0}
            //生命周期函數 掛載時如下
            //1, constructor(構造器)
            //2, componentWillMount(組件將要掛載)
            //構造器
            constructor(props){
                console.log("Count---constructor");
                super(props)
            }
           
            //組件掛載完畢的鉤子
            componentDidMount(){
                console.log("Count---componentDidMount");
            }
           
            componentWillUnmount(){
                console.log("Count---componentWillUnmount");
            }

            //組件是否應該更新(true---go,false---stop) 默認返回true
            shouldComponentUpdate(){
                console.log("Count---shouleComponentUpdate");
                return true
                //如果是false, 就不再往下走了
            }
            //派生的狀態:不是從state得到,是從props得到
            //此方法適用于罕見的用例,即 state 的值在任何時候都取決于 props, 可以使用此方法,但也可以完全不使用,即從地球上消失,沒有作用
            static getDerivedStateFromProps(props,state){
                console.log("getDerivedStateFromProps",props,state);
               
                //this.setState({count:props.count})
               // return props
               return null
            }
            //組件更新完畢
            componentDidUpdate(preProps,preState,snapShot){
                console.log("Count---componentDidUpdate",preProps,preState,snapShot);
            }
          //getSnapshotBeforeUpdate (信息狀態在更新之前來個快照)
          //同樣,此用法很不常見
            getSnapshotBeforeUpdate(){
                console.log("更新快照","getSnapshotBeforeUpate");
                //快照值: 任何值都可以做為快照值 字符串,數組,對象
                return "莊子" //想傳什么就傳什么,傳給componentDidUpdate
            }
            render(){
                console.log("Count---render");
                return (
                    <div>
                        <h1>當前的統計總數為: {this.state.count}</h1>
                        <button onClick={this.add}>點擊+1</button>
                        <button onClick={this.die}>卸載組件</button>
                        <button onClick={this.force}>不更改任何狀態值,強制更新一下</button>
                    </div>
                )
            }
            add = ()=>{
                const {count} = this.state
                this.setState({count:count+1})
            }
            //卸載組件按鈕的回調
            die = ()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById("test"))
            }
            force = ()=>{
                this.forceUpdate();
            }
        }
        //ReactDOM.render(<Count count = {10}/>,document.getElementById("test"))
        const e = React.createElement;
        const domContainer = document.querySelector('#test');
        const root = ReactDOM.createRoot(domContainer);
              root.render(e(Count));

1. 初始化階段: 由ReactDOM.render()觸發--初次渲染

         1. constructor()

         2. componentWillMount

         3. render()

         4. componentDidMount() =====> 常用

            一般在這個鉤子中做一些初始化的事, 例如:開啟定時器,發送網絡請求,訂閱信息

2. 更新階段: 由組件內部this.setState()或父組件render觸發

         1. shouldComponentUpdate()

         2. componentWillUpdate()

         3. render() =====> 必須使用的一個

         4. componentDidUpdate()

3. 卸載組件: 由ReactDOM.unmountComponentAtNode()觸發

         1. componentWillUnmount()  ===> 常用

            一般在這個鉤子中做一些收尾的事, 例如:關閉定時器,取消訂閱消息


新的生命周期:

        即將廢棄:componentWillMount,componentWillUpdate(),componentWillReceiveProps

        增加:

        getDervedStatefrorProps(得到派生的狀態從props),

        getsrapchotEeloreUpdate

        (以上兩個用法極其罕見, 即使完全不會也沒有關系)


中文无码妇乱子二区三区_久久亚洲精品无码福利播放_毛片一级_日韩aⅴ无码久久精品免费

<b id="wionh"></b>

<u id="wionh"><address id="wionh"><meter id="wionh"></meter></address></u>

<