react中useStart数据更新不渲染问题

1 值为对象时

解决的办法：

import { useState } from 'react'
import './App.css'

function App() {
    const [arr, setArr] = useState({data:"data"})
    const add = () => {
      setArr({...arr,data:"updata"})
    }
    return (
    <div className="App">
        {arr.data}
        <br/>
    <button onClick={add}>add</button>
    </div>
  )
}

export default App

React中默认浅监听，当State值为对象时，栈中存的是对象的引用（地址），setState改变的是堆中的数据 所以此时 setArr(arr) 后，栈中的地址还是原地址，React浅监听到地址没变，故会认为State并未改变，故没有重渲染页面解析为一个新的内存地址，然后渲染页面

es6对象结构参考blog.csdn.net/XYXYYDD/art…

2值为number时

原代码

import { useState } from 'react'
import './App.css'

function App() {
    console.log("组件渲染")
    let [data, setData] = useState(0)
    const add = () => {
        console.log("函数执行 set前 当前data值==>" + data)
        setData(data++)
        console.log("函数执行 set后 当前data值==>" + data)
    }
    return (
    <div className="App">
        {data}
        <br/>
    <button onClick={add}>add</button>
    </div>
  )
}

export default App

模拟点击5次

解决的办法：

import { useState } from 'react'
import './App.css'

function App() {
    console.log("组件渲染")
    let [data, setData] = useState(0)
    const add = () => {
        console.log("函数执行 set前 当前data值==>" + data)
        setData(()=>data+1)
        console.log("函数执行 set后 当前data值==>" + data)
    }
    return (
    <div className="App">
        {data}
        <br/>
    <button onClick={add}>add</button>
    </div>
  )
}

export default App

1 ++ 问题

将data++ ==> 更改为 data+1 或++data 也可以

a++称为“后增量”，++a称为“前增量”。

1、
let a = 1;
const b = a++;  // b = 1

2、
let a = 1
const b = ++a;  // b = 2

函数组件的state是重新执行当前函数，而data++ 拿到的值是原来的而不会渲染页面

2 函数问题

将 setData(data+1) 改为 setData(()=>data+1)

原理：

setState返回的函数执行会导致re-render； 框架内部会对多次函数操作进行合并，保证useState拿到最新的状态，避免重复渲染。

如果初始state需要通过复杂计算获得，可以传入一个函数，在函数中计算并返回初始state，此函数只在初始渲染时被调用

*简单理解：*setData(()=>data+1)内部函数执行后会直接将返回值给data

useState源码参考blog.csdn.net/qq_30997503…