React第四节 组件的三大属性之state

前言

状态 state适用于类式组件 中,而再函数式组件 中需要使用 useState HOOK 模拟状态;

React的组件 就是一个状态机,通过与用户的交互,实现不同的状态,根据不同的状态展现出不一样的UI视图

并不是组件中所有的属性 都是组件的状态:

如:以下几种都不是组件的状态

1、自定义的常量(整个生命周期过程中没有变化),没有根据值的变化而进行视图渲染的属性

2、通过 props 传递得到的属性

3、没有在 render() 中使用到的属性

1、写法:

a、类式组件的写法

通过 ES6类和React 的Component 类派生出来的类组件;

可以通过 state 管理组件内部的状态

通过继承 获取到 React Component类的生命周期

复制代码
import React, { Component } from 'react'
// 首先是 类式组件
class MyState extends Component {
    // constructor() {
    //     super();
    //     this.state = {
    //         count: 0
    //     }
    // }
    // 如果没有继承使用父组件的 this 则没有必要写 constructor
    // 或者 声明状态属性
    state = {
        count: 0
    }
    handleIncrement = () => {
        // 更新修改状态属性
        this.setState({
            count: this.state.count + 1
        })
    }
    render(){
        return(
            <>
                <h2>计数器:{this.state.count}</h2>
                <button onClick={this.handleIncrement}>+</button>
            </>
        )
    }
}

export default MyState

b、函数式组件中的写法

复制代码
 import {  useState } from 'react'
    export default function MyState() {
    // 通过 useState 声明一个 count 属性,以及修改 count的方法 setCount
    const [count, setCount] = useState(0)
   //   通过自定义事件 触发 count 累加
    const handleIncrement = () => {
        setCount(count + 1)
    }
    return (
        <>
            <h2>计数器:{count}</h2>
            <button onClick={handleIncrement}>+</button>
        </>
    )
    }

相比较类式组件,函数式组件书写更简洁更轻量

函数式组件不能通过 State 管理函数中的状态,如需要管理 需使用 useState Hook进行处理;

函数式组件中没有生命周期,只能通过 useEffect useCallback 模拟生命周期

函数式组件可以通过 props 接收参数状态,并更新视图;

2、修改state

a、基本类型
number、string、null、undefined、boolean 主要以 16.8版本之后的写法

复制代码
const [name, setName] = useState('Andy')
//修改名称
setState('Jack')

b、引用类型修改时候注意事项

对象、数组为引用类型,在React 的Diffing 算法中对比新旧引用类型时,对比的是引用,而不是引用的对象,若引用的地址不变则不会触发视图更新,故需要返回新的对象或者数组

对象修改

复制代码
注意:直接修改   这样是不会触发视图更新的
student.age = student.age + 1

如下修改才可以更新视图:

复制代码
const [student, setStudent] = useState({
    age: 18,
    sex: '男'
})
// 通过扩展运算符
setStudent({...student, age: student.age + 1})
// 通过回调函数创建新对象
setStudent((pre) => {
    console.log('==pre==', pre)
    return{
        ...pre,
        age: pre.age + 1
    }
})
// 通过ES6 的 Object.assign() 方法修改
setStudent(Object.assign({}, student, {age:student.age + 1}))

数组修改

复制代码
const [cars, setCars] = useState([
    {name: '大众', price: 100},
    {name:'奥迪', price:40}
    ])
// 添加数据
setCars([...cars, {name:'奥迪', price:90}])
const newCars = cars.concat([{name:'奥迪', price:90}])
setCars(newCars)

// 删除数据
setCars(cars.slice(1))

// 过滤
setCars(cars.filter(itm => itm.name === '大众'))

在React中对数组进行修改,需要使用能返回新数组的方法,因为如果数组的指针不改变,是不会触发视图更新的

比如: 不要使用push、pop、shift、unshift、splice等方法修改数组类型的状态,因为这些方法都是在原数组的基础上修改

3、state更新

异步更新

复制代码
比如:
const [count, setCount] = useState()
const handleIncrement = () => {
    setCount(count + 1)
    // 这里log 输出的不是最新的 count;
    console.log('===count=', count)
    // 若想拿到最新的 count 需要如下:
    const curCount = count + 1
    setCount(curCount)
    console.log('===curCount=', curCount)
}
比如:

    const [count, setCount] = useState()
    const handleIncrement = () => {
        // 这些视图不会一次增加3、依然是1
        setCount(count + 1)
        setCount(count + 1)
        setCount(count + 1)
        console.log('===count=', count)
        // 若要一次增加三
        setCount((count) => count + 1)
        setCount((count) => count + 1)
        setCount((count) => count + 1)
        // 或者
        setCount((count) => count + 3)
    }

因为:当我们传入多个 setState 的多个 Object 会被 shallow Merge,而传入多个 setState 的多个 function 会被 "queue" 起来,queue 里的 function 接收到的 state(上面是 参数 )都是前一个 function 操作过的 state

合并更新

调用 setState 时,组件的 state 并不会立即改变setState 只是把要修改的 state 放入一个队列, React 会优化真正的执行时机,并出于性能原因,会将 React 事件处理程序中的多次React 事件处理程序中的多次 setState 的状态修改合并成一次状态修改 。 最终更新只产生一次组件及其子组件的重新渲染,这对于大型应用程序中的性能提升至关重要。

javascript 复制代码
        setCount(count + 1) // 加入队列 count + 1 任务
        setCount(count + 1) // 加入队列 count + 1 count + 1 任务
        setCount(count + 1) // 加入队列 count + 1 count + 1 count + 1 任务
                            // 合并为 count + 1 任务执行
相关推荐
Mike_jia12 小时前
uuWAF:开源Web应用防火墙新标杆——从工业级防护到智能防御实战解析
前端
掘金安东尼12 小时前
Chrome 17 岁了——我们的浏览器简史
前端·javascript·github
袁煦丞12 小时前
群晖NAS FTP远程文件仓库全球访问:cpolar内网穿透实验室第524个成功挑战
前端·程序员·远程工作
前端小巷子12 小时前
JS 打造动态表格
前端·javascript·面试
excel12 小时前
从卷积到全连接:用示例理解 CNN 的分层
前端
UNbuff_012 小时前
HTML 各种事件的使用说明书
前端·html
Mr. Cao code12 小时前
探索OpenResty:高性能Web开发利器
linux·运维·服务器·前端·nginx·ubuntu·openresty
li357420 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj20 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel21 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端