React 生命週期(舊)

　　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() ====> 常用

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

 1 class Count extends React.Component {
 2             // 構造器
 3             constructor(props) {
 
 4                 console.log('Count-constructor');
 5                 super(props)
 6                 // 初始化狀態
 7                 this.state = { count: 0 }
 8             }
 9             render() {
10                 console.log('render')
11                 const { count } = this.state
12                 return
 
 (
13                     <div>
14                         <h2>當前求和為{count}</h2>
15                         <button onClick={this.add}>點我+1</button> 
16                         <button onClick={this.death}>點我解除安裝</button>
17                         <button onClick={this.force}>不更改任何狀態中的資料，強制更新一下</button>
18                     </div>
19                 )
20             }
21             add = () => {
22                 let { count } = this.state
23                 this.setState({count: ++count})
24             }
25             death = () => {
26                 ReactDOM.unmountComponentAtNode(document.getElementById('test'))
27             }
28             force = () => {
29                 this.forceUpdate()
30             }
31             // 元件掛載完畢的鉤子
32             componentDidMount() {
33                 console.log('Count---componentDidMount');
34             }
35             // 元件將要解除安裝的鉤子
36             componentWillUnmount() {
37                 console.log('Count---componentWillUnmount');
38             }
39             // 控制組件更新的"閥門"
40             shouldComponentUpdate() {
41                 console.log('Count---shouldComponentUpdate');
42                 return false;
43             }
44             // 元件將要更新的鉤子
45             componentWillUpdate() {
46                 console.log('Count---componentWillUpdate');
47             }
48             // 元件更新完畢的鉤子
49             componentDidUpdate() {
50                 console.log('Count---componentDidUpdate');
51             }
52         }
53         ReactDOM.render(<Count/>, document.getElementById('test'))

點選+1按鈕

點選解除安裝按鈕

強制更新：forceUpdate()

　　 不管更新的 "閥門" 有沒有開啟，強制更新都是會執行 render 的，但是如果閥門關閉，正常更新是不會執行 render 的

        class A extends React.Component {
            // 初始化狀態
            state = { car: '賓士' }
            render() {
                return (
                    <div>
                        <div>我是A元件</div>
                        <button onClick={this.changeCar}>換車</button>
                        <B car={this.state.car}/>
                    </div>
                )
            }
            changeCar = () => {
                this.setState({car: '奧拓'})
            }
        }
        class B extends React.Component {
            // 元件將要接收新的 props 的
            componentWillReceiveProps() {
                console.log('B---componentWillReceiveProps');
            }
            // 控制組件更新的"閥門"
            shouldComponentUpdate() {
                console.log('B---shouldComponentUpdate');
                return true;
            }
            // 元件將要更新的鉤子
            componentWillUpdate() {
                console.log('B---componentWillUpdate');
            }
            // 元件更新完畢的鉤子
            componentDidUpdate() {
                console.log('B---componentDidUpdate');
            }
            render() {
                console.log('B---render');
                return (
                    <div>我是B元件，接收到的車是{this.props.car}</div>
                )
            }
        }
        ReactDOM.render(<A/>, document.getElementById('test'))