react學習筆記(五)狀態提升&生命週期

react狀態提升

//react組件也可以在組方法中使用組件模板中的原生元素或子組件對象，但是需要手動創建ref，然後在模板中使用這個ref賦值。

一個數字控制demo
父組件

import React, { Component } from 'react';
import "./Second.css";

import Stepper from "../Stepper/Stepper.js";

class Second extends Component {
    constructor(props) {
        super(props);
        // console.log(props);
        this.state = {
            num:10
        }
//ref創建
        this.myRef = React.createRef();
    }
    render() { 
        return (
            <div>
                {/* 對ref進行賦值 */}
                <p ref={this.myRef}>{this.state.num}</p>
                <Stepper value={this.state.num} onChange={this.numChange}></Stepper>
                
                {/* 組件標籤的內容，會被作爲children傳遞給子組件的props。類似vue的插槽 */}
                <p>{this.props.children}</p>
                
            </div>
        );
    }

    componentDidMount(){
        console.log(this.myRef.current);
    }

    numChange = v=>{
        console.log(v);
        this.setState({
            num:v
        });

    }
}

export default Second;

子組件

import React, { Component } from 'react';
import "./Stepper.css";

class Stepper extends Component {
    constructor(props) {
        super(props);
        // console.log(props);
        this.state = {
            
        }
    }
    render() { 
        return (
            <div>
                <button onClick={this.minusClick}>-</button>
                <span>{this.props.value}</span>
                <button onClick={this.addClick}>+</button>
            </div>
        );
    }


    // react中組件的狀態(數組)也遵循單向數據流傳輸原則，父組件可以將狀態傳遞給子組件，子組件只能使用這個狀態，不能修改。

    // 如果子組件中需要修改父組件中的某個數據，那麼父組件需要傳遞一個方法給子組件，子組件中通過調用這個方法來實現修改父組件中的數據。
    minusClick = ()=>{
        this.props.onChange(this.props.value-1);
    }

    addClick = ()=>{
        this.props.onChange(this.props.value+1);
    }
}

export default Stepper;

幫助理解

手動創建ref並賦值，子組件會顯示在children的位置，類似vue的插槽

{this.props.children}

一個雙向的數據綁定控制num
react的數據也遵循單向數據流傳輸原則，父傳子，子使用而不能修改，子調用方法 來修改父組件中的數據
minusClick = ()=>{
this.props.onChange(this.props.value-1);
}
子調用傳遞的方法修改傳遞的值

react生命週期

組件的生命週期可分成三個狀態：

Mounting：已插入真實 DOM
Updating：正在被重新渲染
Unmounting：已移出真實 DOM
**生命週期的方法有：from菜鳥教程
**

• componentWillMount 在渲染前調用,在客戶端也在服務端。
• componentDidMount :
  在第一次渲染後調用，只在客戶端。之後組件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行訪問。
  如果你想和其他JavaScript框架一起使用，可以在這個方法中調用setTimeout,
  setInterval或者發送AJAX請求等操作(防止異步操作阻塞UI)。
• componentWillReceiveProps 在組件接收到一個新的 prop
  (更新後)時被調用。這個方法在初始化render時不會被調用。
• shouldComponentUpdate
  返回一個布爾值。在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。
  可以在你確認不需要更新組件時使用。
• componentWillUpdate在組件接收到新的props或者state但還沒有render時被調用。在初始化時不會被調用。
• componentDidUpdate 在組件完成更新後立即調用。在初始化時不會被調用。
• componentWillUnmount在組件從 DOM 中移除之前立刻被調用。

常用的有
// componentDidMount方法，生命週期函數，當組件渲染完畢時調用。相當於vue組件的mounted

  componentDidMount(){
        console.log("MyCom組件渲染完畢了");
	
    }

// 當組件將要卸載時調用，相當於vue組件的destroied

   componentWillUnmount(){
        console.log("MyCom組件將要銷燬了");
    }

持續更新中…