React-state响应式内部数据(类组件&Hook两种方式整理)

类组件

在类组件中要定义内部数据，由两种方案

1. 构造器里面定义state属性，在这个对象中定义你需要的数据

constructor(){
        super()
        this.state = {
            count:1
        }
    }

1. 在类的下面直接定义一个属性state(推荐)

state = {
        count:10
  }

页面要使用state数据

<p>{this.state.count}</p>

建议大家在React中使用内部state数据的时候，使用解构的方式将内容解构出来

const {count} = this.state
return (
    <div>
    <p>{count}</p>
    <button onClick={this.increment}>+</button>
</div>
)

内部数据修改方式

1. 修改基本数据类型

this.setState({
    count:20
})

调用setState这个函数，React才能检测到数据发生变化，再次调用render渲染页面内容

1. 对象合并
   在调用setState的时候，我们传递一个新的对象给函数，将函数里面要修改的内容和原来的内容进行合并，不会产生替换覆盖。

1. 修改对象的时候
   如果提供了一个新对象，将新对象地址覆盖原来对象的地址。
   如果要修改数组里指定的内容
   尽量将state的数据解构出来，修改完成过后在替换原来的state里面的对象。
   不要频繁操作state，频繁操作state会带来额外的性能开销。

1. 强制更新页面

this.forceUpdate()

这个函数是父组件提供的一个函数，用于React组件强制更新。
在开发过程中尽量不要使用。比较消耗性能

关于setState特点

setState这个函数在修改数据的时候，默认是异步函数。

你在修改数据的时候，不想影响代码的执行。

立即获取到修改过后的值，无法实现。

this.setState({
    count:20
},()=>{
    console.log(this.state.count);
})

提供一个回调函数，可以在回调函数里面获取到修改过后的值。

修改数据也可以提供一个回调

this.setState(()=>{
            // 执行一些代码,记录日志
            return {
                count:20
            }
        })

这种方式修改数据后，也可以通过回调获取到结果

this.setState(()=>{
            // 执行一些代码,记录日志
            return {
                count:20
            }
        },()=>{
            console.log(this.state.count);
        })

setState不总是异步的。。。

如果setState这个函数是放在定时器或者延时器中使用，立即变成同步任务

setTimeout(() => {
            this.setState({
                count: 10
            })
            console.log(this.state.count);
        }, 2000);

计算属性

在React中没有像Vue中提供了专门computed来计算属性，类组件中采用get、set存取器的方式来完成计算属性功能

get total(){
        return this.state.cartList.reduce((sum,next)=>{
            return sum+=next.price * next.num
        },0)ttotal
    }

使用total属性的时候，不要把他当成函数来用

{this.total}

HOOK内部响应式数据

基本语法

const [count,setCount] = useState(0)

修改函数的函数名字可以自己定义,但是一般约定熟成的规范使用set开发,驼峰命令的方式来进行修改

修改基本类型

const [count,setCount] = useState(0)
const [username,setUsername] = useState("xiaowang")


const changeState = ()=>{
        // setCount就是用于修改count的函数
        setCount(1)
    }

修改引用类型

const [user,setUser] = useState({id:1,name:"xiaowang"})

const changeUsername = ()=>{
        setUser({
            ...user,
            name:"小张"
        })
    }

1. 修改用户数据的时候,需要返回一个user对象,不能直接修改之前user,更新state的数据
2. 修改的时候,会用你传递进去的对象覆盖原来的对象,不会合并对象.
3. setState可以合并对象

修改数据的时候还可以使用函数的方式

setCount(()=>{
            // 执行验证
            return 10
        })

异步数据修改

调用修改函数对state进行数据赋值,默认情况下异步的.

setCount(10)

console.log(count) 0

传递函数进去,修改数据同步的方式来执行.

setCount(()=>{
    return 10
})
console.log(count) 10