三、react三大属性之state

最新推荐文章于 2023-02-05 11:17:47 发布

快乐de馒头

最新推荐文章于 2023-02-05 11:17:47 发布

阅读量113

点赞数

分类专栏： reactjs 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/chunxiaqiudong5/article/details/126232653

版权

reactjs 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

一、复习

原生事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <button onclick="demo()">按钮3</button>

<script>
    const btn1=document.getElementById('btn1');
    btn1.addEventListener('click',()=>{
        alert('按钮1被点击了');
    })

    const btn2=document.getElementById('btn2');
    btn2.onclick=()=>{
        alert('按钮2被点击了');
    }

    function demo(){
        alert('按钮3被点击了');
    }
</script>
</body>
</html>

类的方法this指向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<script>
    class Person {
        constructor(name,age){
            this.name=name
            this.age=age
        }
        study() {

            //study方法放在了哪里？类的原型对象上，供实例使用
            //通过Person实例调用study时，study中的this就是Person实例
            console.log(this);
        }
    }

    const p1=new Person('tom',18);
    p1.study()//Person{} ,通过实例调用study

    const x=p1.study//把函数赋值给一个变量
    x()//undefined 调用这个函数,函数的this不是window吗，为什么时undefined呢，因为在类中定义的方法已经在函数体局部开启了严格模式，所以是undefined，所以不敢指向window。

</script>
</body>
</html>

二、state

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="app"></div> 

    <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  
  <!--react核心库-->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  
  <!--react扩展库 用于支持react操作DOM-->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  
  <!--babel 让支持jsx转js-->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">/*此处一定要写babel*/
    //1.创建组件
    class Weather extends React.Component {
        //构造器调用几次？1次
        constructor(props){
            super(props)
            //初始化状态
            this.state={isHot:false,wind:'微风'}
            //解决changeWeather的this是undefined的问题
            this.changeWeather=this.changeWeather.bind(this)//bind用来生成新的函数并改变this，构造器中的this就是实例对象。
        }

        //changeWeather调用几次，点几次就调用几次。
        changeWeather(){
            //changeWeather放在哪里？Weather的原型对象上，供实例使用。
            //问题：由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用的changeWeather函数
            //问题：类中的方法默认开启了局部的严格模式，所以changeWeather中的this是undefined。
            console.log(this)//undefined 因为changeWeather不是Weather的实例对象调用的，
            
            //读取原来的isHot的值
            const isHot=this.state.isHot
            //状态必须通过setState进行更新，且更新是一种合并不是替换，同名的就覆盖掉不同名就不会变，不会覆盖其他的属性的值，所以下面代码只会更新isHot
            this.setState({isHot:!isHot})
        }
        //render调用几次，1+n次，1是初始化的那次，n是状态更新的次数。
        render(){
            //render是Weather的实例对象调用的所以this就是Weather实例
            console.log(this)

            //读取状态
            const {isHot,wind} =this.state
            //react中的事件就是把html中的事件onclick变成onClick,onblur变成onBlur，等等就是变成小驼峰的方式
            //问题：onClick={this.changeWeather}这句话根本没有调用changeWeather，只是通过类的实例对象沿着原型上查找找到了changeWeather，然后就把changeWeather函数交给onClick作为回调，等点击的时候直接从堆里面把函数直接拉出来执行，所以没有通过实例调用。所以changeWeather中的this是undefined。
            return <h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}，{wind}</h1>
        }
    }
    //2.渲染虚拟DOM到页面
    ReactDOM.render(<Weather/>,document.getElementById('app'))
    
  </script>

</body>
</html>

三、state简写（开发中的写法）

复习

class Car{
    constructor(name,price){
        this.name=name
        this.price=price
        //this.wheel=4
    }
    //类中可以直接写赋值语句，如下代码的含义是，给Car的实例对象添加一个属性，名为a，值为1
    a=1
    //轮子数量可以这样写，不用写在构造方法中。
    wheel=4

}

state简写（开发中的写法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="app"></div> 

    <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  
  <!--react核心库-->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  
  <!--react扩展库 用于支持react操作DOM-->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  
  <!--babel 让支持jsx转js-->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">/*此处一定要写babel*/
    //1.创建组件
    class Weather extends React.Component {
       
       //初始化状态
        state={isHot:false,wind:'微风'}

        //自定义方法，要用赋值语句加上箭头函数
        //箭头函数没有自己的this，它的this会找它外面的this，是Weather实例对象。
        changeWeather=()=>{
            console.log(this)//Weather{}
            const isHot=this.state.isHot
            this.setState({isHot:!isHot})
        }

        render(){
            const {isHot,wind} =this.state
            return <h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}，{wind}</h1>
        }
    }
    //2.渲染虚拟DOM到页面
    ReactDOM.render(<Weather/>,document.getElementById('app'))
    
  </script>

</body>
</html>