React-类式组件实例state属性

你眼中的光
86 阅读1分钟

1. this指向类式组件实例对象，通过this.state设置状态值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>类式组件</title>
    </head>
    <body>
        <div id="test"></div>
        <script type="text/javascript" src="js/react.development.js"></script>
        <script type="text/javascript" src="js/react-dom.development.js"></script>
        <script type="text/javascript" src="js/babel.min.js"></script>
        <script type="text/babel">
            class Weatcher extends React.Component{
                constructor(props){
                    super(props)
                    this.state={isHot:false}
                }
                render(){
                    return <h2>今天天气很{this.state.isHot==true?'炎热':'凉爽'}</h2>
                }
            }
            ReactDOM.render(<Weatcher />,document.getElementById('test'))
        </script>
    </body>
</html>

2. 点击的三种方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>类式组件</title>
    </head>
    <body>
        <div id="test"></div>
        <script type="text/javascript" src="js/react.development.js"></script>
        <script type="text/javascript" src="js/react-dom.development.js"></script>
        <script type="text/javascript" src="js/babel.min.js"></script>
        <script type="text/babel">
            class Weatcher extends React.Component{
            constructor(props){
                super(props)
                this.state={isHot:false}
            }
            render(){
                return <h2 id="title" onClick={demo}>今天天气很{this.state.isHot==true?'炎热':'凉爽'}</h2>
            }
            }
            ReactDOM.render(<Weatcher />,document.getElementById('test'))
            // 方式一
            const title=document.getElementById('title')
            title.addEventListener('click',()=>{
            console.log('点击了');
            })
            // 方式二
            const title=document.getElementById('title')
            title.onclick=()=>{
            console.log('点击了');
            }
            // 方式三
            function demo(){
            console.log('点击了');
            }
        </script>
    </body>
</html>

3. this指向问题

类方法无法拿到组件实例对象this。原因在于类方法是通过实例调用的，类方法中使用了严格模式，onClick只是进行了类方法的直接调用。
当方法直接调用时，未开启严格模式下，this指向的是window对象；开启严格模式下，this指向的是undefined

通过bind方法初始化一个实例方法，解决无法获取this的问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>类式组件</title>
    </head>
    <body>
        <div id="test"></div>
        <script type="text/javascript" src="js/react.development.js"></script>
        <script type="text/javascript" src="js/react-dom.development.js"></script>
        <script type="text/javascript" src="js/babel.min.js"></script>
        <script type="text/babel">
            class Weatcher extends React.Component{
                constructor(props){
                    super(props)
                    this.state={isHot:false}
                    //等号左边的this.changeWeather是创建一个实例的changeWeather方法
                    //等号右边的this.changeWeather是原型方法，通过bind方法将this指向的undefined改变为当前的实例对象this
                    this.changeWeather=this.changeWeather.bind(this)
                    }
                render(){
                    return <h2 id="title" onClick={this.changeWeatcher}>今天天气很{this.state.isHot==true?'炎热':'凉爽'}</h2>
                }
                changeWeather(){
                    console.log(this);
                }
            }
            ReactDOM.render(<Weatcher />,document.getElementById('test'))
        </script>
    </body>
</html>

4. setState与执行顺序

setState更新state数据

执行顺序：constructor -> render -> 点击 -> 点击方法 -> render 更新 -> 点击 -> 点击方法 -> render 更新

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>类式组件</title>
    </head>
    <body>
        <div id="test"></div>
        <script type="text/javascript" src="js/react.development.js"></script>
        <script type="text/javascript" src="js/react-dom.development.js"></script>
        <script type="text/javascript" src="js/babel.min.js"></script>
        <script type="text/babel">
            class Weatcher extends React.Component{
                // constructor 初始化调用一次
                constructor(props){
                    super(props)
                    this.state={isHot:false}
                    this.changeWeather=this.changeWeather.bind(this)
                }
                // 调用n+1次 初始化一次 调用方法后更新 n次
                render(){
                    return <h2 onClick={this.changeWeather}>今天天气很{this.state.isHot==true?'炎热':'凉爽'}</h2>
                }
                // 点击次数决定调用次数
                changeWeather(){
                    const isHot=this.state.isHot
                    this.setState({isHot:!isHot})
                }
            }
            ReactDOM.render(<Weatcher />,document.getElementById('test'))
        </script>
    </body>
</html>

5. 简写state和方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>类式组件</title>
    </head>
    <body>
        <div id="test"></div>
        <script type="text/javascript" src="js/react.development.js"></script>
        <script type="text/javascript" src="js/react-dom.development.js"></script>
        <script type="text/javascript" src="js/babel.min.js"></script>
        <script type="text/babel">
            class Weatcher extends React.Component{
                //创建一个state实例属性
                state={isHot:false}
                render(){
                    return <h2 onClick={this.changeWeather}>今天天气很{this.state.isHot==true?'炎热':'凉爽'}</h2>
                }
                // 箭头函数指向外层，创建了一个changWeatcher实例方法
                changeWeather=()=>{
                    const isHot=this.state.isHot
                    this.setState({isHot:!isHot})
                }
            }
            ReactDOM.render(<Weatcher />,document.getElementById('test'))
        </script>
    </body>
</html>
avatar
文章
阅读
粉丝