元件例項三大核心屬性1：state

1.定義

　　1. state 是元件物件最重要的屬性，值是物件（可以包含多個key-value）

　　2. 元件被稱為"狀態機"，通過更新元件的 state 來更新對應的頁面顯示（重新渲染元件）

2. 注意

　　1. 元件中 render 方法中的 this 為元件例項物件

　　2. 元件自定義的方法中 this 為 undefined，如何解決？

　　　　1. 強制繫結 this：通過函式物件的 bind()

　　　　2. 箭頭函式

　　3. 狀態資料，不能直接修改或更新：使用React.component上的 setState() 方法對資料進行更新

    <div id="test"></div>
    <!-- 引入react核心庫 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用於支援react操作DOM -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入babel，用於將jsx轉為js -->
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
    <script type='text/babel'>
        //
 
 1.建立元件
        class Weather extends React.Component {
            // 構造器呼叫幾次？——1次
            constructor(props) {
                super(props)
                // 初始化狀態
                this.state = {isHot: true}
                // 解決changeWeather中this指向問題
                this.changeWeather = this.changeWeather.bind(this
 
)
            }
            // render呼叫幾次？ ——1+n次  1是初始化，n是狀態更新的次數
            render() {
                // 讀取狀態
                const {isHot} = this.state
                return <h1 onClick={this.changeWeather}>今天天氣很{isHot ? '炎熱' : '涼爽'}</h1>
            }
            changeWeather() {
                // changeWeather放在哪裡？ ——Weather的原型物件上，供例項使用
                // 由於changeWeather是作為onClick的回撥，所以不是通過例項呼叫的，是直接呼叫
                // 類中的方法預設開啟了局部的嚴格模式，所以changeWeather中的this為undefined
                console.log(this)
                const isHot = this.state.isHot
                // 嚴重注意：狀態必須通過setState進行更新，且更新是一種合併，不是替換。
                this.setState({isHot: !isHot})

                // 嚴重注意：狀態（state）不可直接更改，下面這行就是直接更改！！
                // this.state.isHot = !isHot // 錯誤的寫法
            } 
        }
        // 2. 渲染元件到頁面
        ReactDOM.render(<Weather/>,document.getElementById('test'))
    </script>

上面程式碼有一些繁瑣，我們來簡化一下：

    <script type='text/babel'>
        // 1.建立元件
        class Weather extends React.Component {
            state = {isHot:false, wind: '微風'}
            render() {
                const {isHot,wind} = this.state
                return <h1 onClick={this.changeWeather}>今天天氣很{isHot ? '炎熱' : '涼爽'},{wind}</h1>
            }
            changeWeather = () => {
                const isHot = this.state.isHot
                this.setState({isHot: !isHot})
            } 
        }
        // 2. 渲染元件到頁面
        ReactDOM.render(<Weather/>,document.getElementById('test'))
    </script>