<b id="wionh"></b>

<u id="wionh"><address id="wionh"><meter id="wionh"></meter></address></u>

React組件實例的核心屬性State的用法

時間:2023-02-01 20:34:55 類型:React
字號:    
 <!-- 準備好一個容器 -->
    <div id="test"></div>

    <!-- 引入核心庫  React對象 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom, 用于支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel, 用于將jxs轉為js -->
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
        //1. 創建類式組件
        class Weather extends React.Component{
            //初始化狀態
            state = {isHot:true}
            render() {
                const {isHot} = this.state
                return <h1 id="title" onClick={this.changeWeather}>今天天氣很{isHot ? "炎熱":"涼爽"}</h1>
            }

            //自定義方法: 要用賦值語句的形式 + 箭頭函數
            changeWeather = ()=>{
                console.log(this);
                //箭頭函數沒有自己的this, 它會找外側函數的this做為箭頭函數自己的this
                let isHost = this.state.isHot;
                //注意: 狀態(state)不可以直接更改(React不認), 要借助一個內置的API setState 如下:
                this.setState({isHot:!isHost})
               
            }
        }
        ReactDOM.render(<Weather/>,document.getElementById("test"))
                       
    </script>

State應用總結:

 1> state 是組件對象最重要的屬性,值是對象(可以包含多個key-value的組合)

    2> 組件被稱為"狀態機", 通過更新組件的state來更新對應的頁面顯示(重新渲染組件)

    注意:

        1. 組件中render方法中的this為組件實例對象

        2. 組件中自定義的方法中 this 為undefined?如何解決?

            a. 強制綁定 this, 通過函數對象的bind();

            b. 賦值 + 箭頭函數

        3.  狀態數據: 不能直接修改或者更新,通過setState方法 

                               當更新State屬性值時,render會再次渲染   

以下為非簡化用法,需要在類中的constructor方法中為每一個方法重新綁定this(類中的方法存儲在原型對象上,事件綁定是這個方法,里面的this為undefined)

 //1. 創建類式組件
        class Weather extends React.Component{
            constructor(props){
                super(props);
                this.state = {isHot:true}
                this.changeWeather = this.changeWeather.bind(this);
                                     //改變this.changeWeather函數的this為當前實例對象
            }
            //render調用幾次? 1 + n 次 1是初始化的那次,n是每次更新狀態時的值
            render() {
                const {isHot} = this.state
                return <h1 id="title" onClick={this.changeWeather}>今天天氣很{isHot ? "炎熱":"涼爽"}</h1>
                        //注意:{clickTitle} -- 渲染時返回一個方法  不是 {clickTitle() -- 渲染時會執行函數,
                        返回undefined}
                        //onClick  :  不是onclick
            }
            changeWeather(){
                //changeWeather放在哪里?---Weather的原型對象上, 供實例使用
                //由于changerWeather是作為onClick的回調(通過this找到,非直接調用); 所以不是通過實例調用的,
                是直接調用
                //類中的方法默認開啟了局部的嚴格模式, 所以changeWeather中的this為undefined;
                //console.log(this); //undefined
                // console.log("標題被單擊了");
                  let isHost = this.state.isHot;
                // this.state.isHot =  !this.state.isHot; //直接更改
                //console.log(this.state.isHot);
                //嚴重注意: 狀態(state)不可以直接更改(React不認), 要借助一個內置的API setState 如下:
                this.setState({isHot:!isHost})
               
            }
        }
        ReactDOM.render(<Weather/>,document.getElementById("test"))


中文无码妇乱子二区三区_久久亚洲精品无码福利播放_毛片一级_日韩aⅴ无码久久精品免费

<b id="wionh"></b>

<u id="wionh"><address id="wionh"><meter id="wionh"></meter></address></u>

<