生命週期 (React 16 五)

Component 除了 render 方法以外，還有其他的方法，以下列出一些常用的
render 方法是必要的，其他都是可選的

※

class Interval extends React.Component {
    constructor(p) {
        super(p)
        console.log("constructor")
        this.state = {
            opa:1
        }
    }
    
    handleCloseInternal() {
        console.log("按關閉了")
        ReactDOM.unmountComponentAtNode(document.querySelector("#div1"))
    }
    
    componentWillMount()  {
        console.log("componentWillMount")
    }
    
    componentDidMount() {
        console.log("componentDidMount")
    }
    
    componentWillUpdate() {
        console.log("componentWillUpdate")
    }
    
    componentDidUpdate() {
        console.log("componentDidUpdate")
    }
    
    componentWillUnmount() {
        console.log("componentWillUnmount")
    }
    
    render() {
        console.log("render")
        return (
            <div>
                <h1 style={{opacity:this.opa}}>{this.props.title}

關閉, document.querySelector("#div1"));
※覆寫的方法都是 component 開頭

※componentWillUnmount 要按關閉鈕才會執行

※componentWillMount  ->  render  ->  componentDidMoun，在 render 前後各有方法執行

※componentWillUpdate 和 componentDidUpdate 會在 setState 前後執行，但此例沒寫 setState，所以沒執行

※文字漸淡效果

class Interval extends React.Component {
    constructor(p) {
        super(p)
        console.log("constructor")
        this.state = {
            opa:1
        }
    }
    
    handleCloseInternal() {
        console.log("按關閉了")
        ReactDOM.unmountComponentAtNode(document.querySelector("#div1"))
    }
    
    componentWillMount()  {
        console.log("componentWillMount")
    }
    
    componentDidMount() {
        console.log("componentDidMount")
        /*
        this.intervalId = setInterval(() => {
            let {opa} = this.state
            opa -= 0.2
            if(opa <= 0) {
                opa = 1
            }
            this.setState({opa})
        }, 500)
        */
    
        this.intervalId = setInterval(function() {
            let {opa} = this.state
            opa -= 0.2
            if(opa <= 0) {
                opa = 1
            }
            this.setState({opa})
        }.bind(this), 500)
    }
    
    componentWillUpdate() {
        console.log("componentWillUpdate")
    }
    
    componentDidUpdate() {
        console.log("componentDidUpdate")
    }
    
    componentWillUnmount() {
        console.log("componentWillUnmount")
        clearInterval(this.intervalId)
    }
    
    render() {
        console.log("render")
        return (
            <div>
                <h1 style={{opacity:this.opa}}>{this.props.title}

關閉, document.querySelector("#div1"));

※注意 style 是用兩個花括號

※setInterval 使用箭頭函數可以不用 bind

※小數點會有誤差，所以用 <= 0