react中state的用法，标准的写法，解决方法的this指向问题

最新推荐文章于 2023-04-10 16:32:29 发布

肖肖冲鸭

最新推荐文章于 2023-04-10 16:32:29 发布

阅读量205

点赞数

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

本文链接：https://blog.csdn.net/weixin_48952990/article/details/126207608

版权

react 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

react中创建组件，最为官方的方式使用最多的方式是用类创建，也就是es6中的class类
要想了解react的基本用法，得先熟悉es6中class的基本用法，主要得先知道constructor,super,以及自定义方法的使用
总结
1）类中的构造器不是一定要写的，要对实例进行一些初始化的操作，如添加指定属性时才写
2）如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须调用的
3）类中所定义的方法，都是放在了类的原型对象上，供实例使用
了解了es6中类的相关知识，我们可以学习react中如何用类创建组件了，

第一种方式：使用bind改变this的指向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test">
        <!-- 引入的时候必须按照这个顺序-->
        <!-- 引入react核心库 -->
        <script type="text/javascript" src="../js/react.development.js"></script>
        <!-- 引入react-dom,用于支持react操作dom -->
        <script type="text/javascript" src="../js/react-dom.development.js"></script>
        <!-- 引入babel,用于将jsx转化为js -->
        <script type="text/javascript" src="../js/babel.min.js"></script>
        <script type="text/babel">
            // 1.创建组件
            class Weather extends React.Component{
                // ——构造区调用几次 —— 一次
                constructor(props){
                    super(props)
                    // 初始化状态
                    this.state={isHot:false,wind:'微风'}
                    // 解决changeWeather中this指向的问题（不解决changeWeather中的this是undefined）
                    this.changeWeather=this.changeWeather.bind(this)//此处的changeWeather是原型上的生成的，然后挂在实例自身
                }
                // render调用几次 ——1+n次
                render(){
                    // 读取状态 react中绑定事件
                    return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot?'炎热':'凉爽'},{this.state.wind}</h1>
                }
                // changeWeather调用几次？ ——点几次调用几次
                changeWeather(){//这个是原型上的实例对象
                    // changeWheather放在哪里？——Weather的原型对象上，供实例使用
                    // 由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
                    // 类中的方法默认开启了严格模式，所以changeWeather中的this是undefined

                    // 获取原来的isHot的值
                    const isHot=this.state.isHot
                    // 严重注意：状态必须通过setState修改,且更新是一种合并，不是直接替换
                    this.setState({isHot:!isHot})
                    // 严重注意！！！！状态不可直接更改，下面这行就是直接更改！！！
                    // this.state.isHot=!isHot//这时错误的写法 
                    
                    
            }
            }
            // 2.渲染组件到页面
            ReactDOM.render(<Weather/>,document.getElementById('test'))
        </script>
    </div>
</body>
</html>

以上代码复杂且冗余，多了不必要的步骤，写多个方法的时候还需要多次调用bind改变this指向，相比之下，如果我们进一步了解类的用法，可以精简许多，在类中可以直接写赋值语句，例：

 class Car{
            constructor(name,price){
                this.name=name
                this.price=price
                // this.wheel=4
            }
            // 类中可以直接写赋值语句，如下代码的含义是给Car的实例对象添加一个属性，名为a,值为1
            a=1
        }

所以综上所述，我们有了最终的解决方法（使用箭头函数加赋值语句的形式来创建自定义方法，可以很好的解决this的指向问题）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test">
        <!-- 引入的时候必须按照这个顺序-->
        <!-- 引入react核心库 -->
        <script type="text/javascript" src="../js/react.development.js"></script>
        <!-- 引入react-dom,用于支持react操作dom -->
        <script type="text/javascript" src="../js/react-dom.development.js"></script>
        <!-- 引入babel,用于将jsx转化为js -->
        <script type="text/javascript" src="../js/babel.min.js"></script>
        <script type="text/babel">
            // 1.创建组件
            class Weather extends React.Component{
                // 类中可以直接写赋值语句，如下代码的含义是给Weather的实例对象添加一个属性，名为state,值为{isHot:false,wind:'微风'}
                state={isHot:false,wind:'微风'}
                render(){
                    return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot?'炎热':'凉爽'},{this.state.wind}</h1>
                }
                //自定义方法——要用赋值语句形式+箭筒函数  这里写成赋值语句，相当于往实例的身上添加属性（key:value）
                changeWeather=()=>{
                    // console.log(this) //箭头函数的this需要找外部的，此处的this是Weather的实例对象
                    const isHot=this.state.isHot
                    this.setState({isHot:!isHot})
            }
            }
            ReactDOM.render(<Weather/>,document.getElementById('test'))
        </script>
    </div>
</body>
</html>