React学习（三）（setState的使用，state的简写）

qq_52551375

已于 2024-01-24 22:10:25 修改

阅读量463

点赞数 11

文章标签： react.js 学习 javascript

于 2024-01-24 22:01:54 首次发布

本文链接：https://blog.csdn.net/qq_52551375/article/details/135817335

版权

补充：
1.箭头函数： ES6 中声明函数的一种方式，更简短的函数并且不绑定 this。

var f = ([参数]) => 表达式（单一）
// 等价于以下写法
var f = function([参数]){
   return 表达式;
}

箭头函数的基本语法如下：

(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式（单一）
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数应该写成一对圆括号。
() => {函数声明}

2.复习类中的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 type="text/javascript">
        class Person
        {
            constructor (name,age){
                this.name = name;
                this.age = age;
            }
            speak()
            // speak方法放在类的原型对象上，供实例使用
            // 通过person实例调用speak时，speak中的this就是person实例
            {
                console.log(this)
            }
        }
        const p1 = new Person('小明',18)
        p1.speak()//通过实例调用speak
    </script>
</body>
</html>

3.setState的使用
至此，已经实现了点击切换状态

<!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= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        // 创建
        class Weather extends React.Component {
            // 构造器调用1次
            constructor(props) {
                super(props)
            //初始化状态 
                this.state = {
                    ishot:false,
                    wind:'微风'
                }
                // 解决changeWeather中this指向问题
                this.changeWeather = this.changeWeather.bind(this)//bind生成一个新的函数，改了函数中的this
            }
            // render调用1+n次
            render(){
                console.log(this)
                // 读取状态
                const {ishot,wind}=this.state
                return <h1 id="title" onClick={this.changeWeather}>今天天气很{ishot ? '炎热': '凉爽'}.{wind}</h1>
            }
            // changeWeather调用次数：点几次调用几次
            changeWeather()
            {
                // changeWeather放在Weather的原型对象上，供实例使用
                // 通过Weather实例调用changeWeather时，changeWeather中的this就是Weather实例
                // 由于changeWeather是作为onClick的回调，所以不是通过实例调用的，而是直接调用的、
                // 类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined

                // 获取原来的ishot值
                const ishot =this.state.ishot
                // 状态不可直接更改，下面这行就是直接更改
                // this.state.ishot = !ishot//错误写法
                // 状态更新要借助一个API，setState进行更改,且更新是一种合并，不是替换 
                // this.setState({ishot: !ishot})
                this.setState({ishot:!ishot})
            }
        }
        // 渲染
        ReactDOM.render(<Weather/>,document.getElementById('test'))
        // const title = document.getElementById('title')
        // title.addEventListener('click',()=>{
        //     console.log('标题被点击了')
        // })

        // const title = document.getElementById("title");
        // title.onclick = ()=>{
        //     alert('按钮2被点击了')
        // }
        
    </script>


</body>
</html>

4.复习类中添加属性（不必写在构造器中，可直接添加）

<!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 type="text/javascript">
                /*
        总结：
            1.类中的构造器不是必须写的
            2.要对实例进行一些初始化操作时才写，如添加指定属性
            3.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须调用的
            4.类中所定义的方法都是放在类的原型对象上
        */
        // 创建一个类
        class Person{
            // 构造器方法
            constructor(name,age){
                // 构造器中的this是类的实例对象
                this.name = name
                this.age = age
            }
            // 一般方法
            speak(){
                // speak方法放在类的原型对象上，供实例使用
                // 通过person实例调用speak时，speak中的this就是person实例
                console.log(`我叫${this.name},年龄${this.age}`)
            }
        }
        // 创建一个Person的实例对象
        const p1 = new Person('tom',18)
        const p2 = new Person('jerry',20)
        console.log(p1)
        console.log(p2)
        p1.speak()
        p2.speak()

        // 创建一个Student类，继承Person类
        class Student extends Person{
            constructor(name,age,grade){
                super(name,age)//必须放在第一行
                this.grade = grade
            }
            // 重写从父类继承过来的方法
            speak(){
                console.log(`我叫${this.name},年龄${this.age},年级${this.grade}`)
            }
             // study方法放在类的原型对象上，供实例使用
                // 通过student实例调用study时，study中的this就是student实例
            study(){
                console.log('我很努力学习')
            }
        }
        const s1 = new Student('张',15,'高一')
        console.log(s1)
        s1.speak()
        class Car{
            constructor(name,price){
                this.name=name
                this.price=price
                // this.wheel=4
            }
            // 类中可以直接写赋值语句
            // 给Car的实例对象添加一个属性，名为wheel,值为4
            wheel = 1

        }
        const c1 = new Car('奔驰',10)
        console.log(c1)
    </script>
</body>
</html>

5.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= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        // 创建
        class Weather extends React.Component {
            // 构造器调用1次
            // 【简化】构造器不需使用
            // constructor(props) {
            //     super(props)
            // //初始化状态 (【简化】)
            //     // this.state = {ishot:false,wind:'微风'}
            //     // 解决changeWeather中this指向问题
            //     // this.changeWeather = this.changeWeather.bind(this)//bind生成一个新的函数，改了函数中的this
            // }
            state ={ishot:false, wind:'微风'}
            // render调用1+n次
            render(){
                console.log(this)
                // 读取状态
                const {ishot,wind}=this.state
                return <h1 id="title" onClick={this.changeWeather}>今天天气很{ishot ? '炎热': '凉爽'}.{wind}</h1>
            }
            // changeWeather调用次数：点几次调用几次
            // 【简化】，将changeWeather使用赋值语句方式写，并且使用箭头函数，箭头函数没有this，会找外层的this
            // 自定义方法，要用赋值语句形式+箭头函数
            changeWeather = ()=>
            {
                // changeWeather放在Weather的原型对象上，供实例使用
                // 通过Weather实例调用changeWeather时，changeWeather中的this就是Weather实例
                // 由于changeWeather是作为onClick的回调，所以不是通过实例调用的，而是直接调用的、
                // 类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined

                // 获取原来的ishot值
                const ishot =this.state.ishot
                // 状态不可直接更改，下面这行就是直接更改
                // this.state.ishot = !ishot//错误写法
                // 状态更新要借助一个API，setState进行更改,且更新是一种合并，不是替换 
                // this.setState({ishot: !ishot})
                this.setState({ishot:!ishot})
            }
        }
        // 渲染
        ReactDOM.render(<Weather/>,document.getElementById('test'))
        // const title = document.getElementById('title')
        // title.addEventListener('click',()=>{
        //     console.log('标题被点击了')
        // })

        // const title = document.getElementById("title");
        // title.onclick = ()=>{
        //     alert('按钮2被点击了')
        // }
        
    </script>


</body>
</html>

6.state总结
（1）state是组件对象最为重要的属性，值是对象（可以包含多个key-value组合）
（2）组件被称为状态机，通过更新组件的state来更新对应的页面显示（重新渲染组件）
【注意】
（1）组件render方法中的this为组件实例对象
（2）组件自定义的方法中this为undefined，如何解决？
a.强制绑定this，使用函数对象的bind()
b.箭头函数
(3)状态数据，不能直接更改，要使用setSate

qq_52551375

关注

11
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
React学习（三）（setState的使用，state的简写）

1.箭头函数： ES6 中声明函数的一种方式，更简短的函数并且不绑定 this。4.复习类中添加属性（不必写在构造器中，可直接添加）至此，已经实现了点击切换状态。2.复习类中的this指向。3.setState的使用。5.state总结【简写】
复制链接

扫一扫