```javascript import React, { Component } from 'react'; import PropTypes from 'prop-types'; class Counter extends Component { // 1.創建組件類實例 // 1.1一初始化state // 1.2綁定成員函數的this環境 constructor(props) { super(props); this.onClickIncrementButton = this.onClickIncrementButton.bind(this); this.onClickDecrementButton = this.onClickDecrementButton.bind(this); this.state = { count: props.initValue }; // console.log('enter constructor:' + this.props.caption); } /*onClickIncrementButton () { this.setState({ count: this.state.count + 1 }) } onClickDecrementButton () { this.setState({ count: this.state.count - 1 }) }*/ onClickIncrementButton () { this.updateCount(true); } onClickDecrementButton () { this.updateCount(false); } updateCount(isIncrement) { const previousValue = this.state.count; const newValue = isIncrement ? previousValue + 1 : previousValue - 1; this.setState({count: newValue}); this.props.onUpdate(newValue, previousValue); } // 2.render函數之前被調用就是將要裝載的時候 componentWillMount() { // console.log('enter componentWillMount:' + this.props.caption); } // 3.render函數不做實際的渲染動作，只是返回一個jsx描述的機構，交給react庫來渲染 render() { const {caption} = this.props; // ES6 的解構賦值語法，從this.props 中獲得了名為 caption 的 prop 值 // console.log('enter render:' + caption); return ( <div> <button onClick={this.onClickIncrementButton}> + </button> <button onClick={this.onClickDecrementButton}> - </button> <span>{caption} count: {this.state.count}</span> </div> ); } // 4.render函數返回的jsx描述結構渲染之后，即組件已經被裝載到DOM樹上 componentDidMount() { // console.log('enter componentDidMount:' + this.props.caption); } // 5.React組件卸載過程 componentWillUnmount() { // console.log('enter componentWillUnmount'); } // 更新過程update componentWillReceiveProps() { // console.log('enter componentWillReceiveProps:' + this.props.caption); } // shouldComponentUpdate和render函數,是React生命周期函數中唯二兩個要求有返回結果的函數 // render 函數的返回結果將用于構造DOM對象, // 而shouldComponentUpdate函數返回一個布爾值,告訴React 庫這個組件在這次更新過程中是否要繼續 // 如果這個函數返回true,那就會繼續更新過程，接下來調用 render 函數；反之,如果得到一個false ，那就立刻停止更新過程，也就不會引發后續的渲染了 shouldComponentUpdate(nextProps, nextState) { // console.log('enter shouldComponentUpdate:' + this.props.caption); // return false; // return true; return (nextProps.caption !== this.props.caption) || (nextState.count !== this.state.count); } // shouldComponentUpdate返回true的時候才會繼續進入后續步驟的。 // update引起的render之前的更新，但是不會引起頁面的渲染也就是DOM被裝載之前 componentWillUpdate() { // console.log('enter componentWillUpdate:' + this.props.caption); } // render - update 引發render函數，不會渲染，頁面返回jsx描述結構交給react庫來進行渲染 // render 返回的jsx描述結構渲染， DOM裝載之后進行的操作 componentDidUpdate() { // console.log('enter componentDidUpdate:' + this.props.caption); } } Counter.propTypes = { caption: PropTypes.string.isRequired, initValue: PropTypes.number, onUpdate: PropTypes.func }; Counter.defaultProps = { initValue: 0, onUpdate: f => f }; export default Counter; ```