react点击实现文字变化

m0_49471668

已于 2022-06-30 10:53:59 修改

阅读量576

点赞数 1

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

于 2022-06-30 10:35:43 首次发布

本文链接：https://blog.csdn.net/m0_49471668/article/details/125535799

版权

react 专栏收录该内容

19 篇文章 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>hello_react</title>
</head>
<body>
    <!-- 准备容器 -->
    <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,用于将jsx转为js -->
    <script src="../js/babel.min.js"></script>
    <!-- 注意这里要写babel,代表写的是jsx，babel将jsx翻译为js -->
    <script type="text/babel">
       //1.创建类组件
        class Weather extends React.Component{
            //点击时页面一直变化  构造器调用几次?---1次
            constructor(props){
                console.log("constructor")
                // 在构造器中可以触碰到实例对象，所以才能初始化状态
                super(props)
                //在构造器中初始化状态
                this.state = {isHot:false,wind:'微风'}
                // 赋值语句
                // 右侧this是组件实例对象，即使实例对象没有changeweather方法，会找到原型上，调用bind
                // 实例对象上多了changeweather方法
                //解决changeweather中this指向问题
                this.changeweather = this.changeweather.bind(this)
                }
            //render调用几次?- 1+n次 1是初始化的那次n是状态更新的次数
            render(){
                console.log('render')
                // render中的this也是Weather组件实例对象
                    //读取状态
                    console.log("render中this",this)
                    const {isHot,wind} = this.state
                    // 在react中onclick->onClick onblur->onBlur class->className
                    // onClick后写{}  不能写this.changeweather(),不点击就会被调用 
                    // onClick={this.changeweather}是直接调用，类已经开启严格模式，所以changeweather中的this为undefined
                    return <h1 onClick={this.changeweather}>今天天气很{isHot ? '炎热':'凉爽'},{wind}</h1>
                    // 那么点击的时候到底是原型上的changeweather 还是实例自身的changeweather呢？---是自身上的
                    // 原型上的changeweather必须要有，拿原型上的挂载到实例上，才有的changeweather
                }
                // 类中定义方法
            changeweather(){
                //changeweather放在哪里?-- weather的原型对象上，供实例使用--调用的时候要加this
                //通过Weather的实例调用changeWeather时，changeWeather中的this就是Weather实例
                // 这里的changeweather不是Weather实例调用的
                //由于changeweather是作为onClick的回调，所以不是通过实例调用的，是直接调用
                //类中的方法默认开启了局部的严格模式，所以changeweather中的this为undefined
                // /获取原来的isHot值
                const isHot = this.state.isHot
                console.log("changeweather中this",this)
                //严重注意:状态必须通过setstate进行更新,且更新是一种合并，并不是替换
                this.setState({isHot: !isHot})
                //严重注意:状态(state)不可直接更改，下面这行就是直接更改!!!
                //this.state.isHot = !isHot //这是错误的写法
                }
        }

                //2.渲染组件到页面
                // weather实例对象是react new出来的，在外面无法取到weater的实例对象
                ReactDOM.render(<Weather/>,document.getElementById('test'))
                function demo(){
                console.log('标题被点击了')
                }

                // 验证直接调用this为unfined
                class Person{
                    constructor(name,age){
                        this.name=name
                        this.age=age
                    }
                    // 类中定义的方法已经在局部开启了严格模式，当x直接调用的时候不敢直接指向window，而是指向undefined
                    speak(){
                        // speak方法放在哪里？ 类的原型对象上，供实例使用
                        // 通过Person方法实例调用speak,speak中的this就是Person实例
                        console.log(this)//Person {name: 'rr', age: '17'} 输出为类的实例对象
                    }
                }
                const p1=new Person('rr','17');//p1是person的实例对象
                p1.speak()//通过实例调用speak方法
                const x=p1.speak//没有调用speak方法，只是赋值语句，把p1身上的speak属性交给x
                x()//属于直接调用 undefined


                function demo1(){
                    console.log("this",this)
                }
                demo1()
                // bind方法返回一个新函数
                demo1.bind({a:1,b:2})
                const y =demo1.bind({a:1,b:2})
                y()

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

精简模式：开发时写

<!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>hello_react</title>
</head>

<body>
    <div id="test"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Weather extends React.Component{
            // 往Weather实例对象添加一个值为state,值为对象
            state = {isHot:false,wind:'微风'}
            render(){
                console.log('render')
                    console.log("render中this",this)
                    const {isHot,wind} = this.state
                    return <h1 onClick={this.changeweather}>今天天气很{isHot ? '炎热':'凉爽'},{wind}</h1>
                }
            // chageweather这样写是放在了实例对象自身,要写成箭头函数
            // 类中自定义方法要写成赋值语句+箭头函数这种形式
            changeweather=()=>{
                console.log("changeweather中this",this)
                const isHot = this.state.isHot
                this.setState({isHot: !isHot})
                }
        }
        ReactDOM.render(<Weather/>,document.getElementById('test'))


        // 演示类中可以直接写赋值语句,含义为给Car实例对象添加一个属性，名为a,只为1
        class Car {
            constructor(name,price){
                this.name=name
                this.price=price    
            }
            // 类中可以直接写赋值语句,含义为给Car实例对象添加一个属性，名为a,只为1
            a=1
            wheel=4
        }
        const c1=new Car('奔驰',12)//{a: 1, name: '奔驰', price: 12}
        const c2=new Car('宝马',18)//{a: 1, name: '宝马', price: 18}
        console.log(c1)
        console.log(c2)

        </script>
</body>

</html>