react个人笔记 -- 经典案例来明白this指向的重要性以及解决方法

最新推荐文章于 2023-04-10 20:37:13 发布

奇葩之小王子

最新推荐文章于 2023-04-10 20:37:13 发布

阅读量92

点赞数

文章标签： react js

本文链接：https://blog.csdn.net/qq_52138438/article/details/115253419

版权

这篇博客介绍了在React中如何使用构造器和箭头函数来管理组件的状态，特别是处理`this`指向的问题。作者通过示例展示了在`changeWeather`方法中如何切换天气描述，并强调了不能直接修改`state`，而应该使用`setState`进行更新。文章探讨了使用构造器时需要手动绑定`this`的不便，以及利用箭头函数简化代码的方法。

摘要由CSDN通过智能技术生成

案例要求：通过点击文字 “今天天气很炎热”转变成“今天天气很寒冷”，再点击又转变

萌新作者在线卑微记录自己学习React的历程

代码及笔记来自尚硅谷学习视频

先来看看使用构造器的方法来实现

<!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>state</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入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{
        //构造器调用了几次 -- 1次
        constructor(props){
            super(props)
            //初始化状态(必须要调用super,不然会报错)
            this.state = {isHot:false}
            //解决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(){
            //console.log('this');
            //changeWeather放在哪里？————Weather的原型对象上，供实例使用
            //由于changeWeather是作为onclick的回调，所以不是通过实例调用，是直接调用
            //类中的方法默认开启了局部的严格模式,所以changeWeather中的this为undefined

            //获取原来的isHot值
            const isHot = this.state.isHot
            //严重注意：状态(state)不可直接更改,下面这行就是直接更改
            //this.state.isHot = !isHot //这是错误的写法

            //严重注意：状态必须通过setState进行更新,且更新是一种合并,不是替换
            this.setState({isHot:!isHot})            
        }
    }
    // 2.渲染组件到页面
    
    ReactDOM.render(<Weather/>,document.getElementById('test'))


</script>

</body>
</html>

我们发现，为了成功让点击事件调用changeWeather，不得不时刻关注它的this指向,最后还是要通过bind的方法将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>state</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入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" >

    // 创建组件
    class Weather extends React.Component{
        //初始化状态
        state = {isHot:false}
        render(){
            const {isHot} = this.state
            return <h1 onClick = {this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
        } 
        //自定义方法 -- 要用赋值语句的形式+箭头函数
        changeWeather = ()=>{
            const isHot = this.state.isHot
            this.setState({isHot:!isHot})            
        }
    }
    
    ReactDOM.render(<Weather/>,document.getElementById('test'))


</script>

</body>
</html>

奇葩之小王子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react个人笔记 -- 经典案例来明白this指向的重要性以及解决方法

案例要求：通过点击文字 “今天天气很炎热”转变成“今天天气很寒冷”，再点击又转变萌新作者在线卑微记录自己学习React的历程代码及笔记来自尚硅谷学习视频先来看看使用构造器的方法来实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫