React：真正理解三个常用

match_M

已于 2023-04-28 19:23:12 修改

阅读量56

点赞数

文章标签： react.js 前端

于 2023-04-28 19:13:21 首次发布

本文链接：https://blog.csdn.net/m0_56141160/article/details/130281789

版权

文章讨论了React中使用useState管理状态时，关于数组操作和组件渲染的问题。在直接修改数组并使用setArray时，由于数组引用不变，组件不会重新渲染。正确的做法是使用setArray接收当前状态的回调函数，以确保每次更新都基于最新的状态。另外，文中通过示例说明了不正确操作会导致的屏幕渲染覆盖问题。

摘要由CSDN通过智能技术生成

1.事件的回调

2.组件渲染判断

3.state工作原理

const [array,setArray]=useState([1,2,3])

1.数组引用的是特定的内存块，直接更改数组，但是数组指向的引用不会改变，而组件的更新依赖于它指向的引用是否变化；引用的变化依赖于setArray

function App() {

  const [array,setArray]=useState([1,2,3])

  function addToStart(number){
    array.unshift(number)
    setArray(array)
    // setArray([number,...array])
  }

  function addToEnd(number){
    array.push(number)
    setArray(array)
    // setArray([...array,number])
  }
  
  return (
    <div className="App">
      
      {array.join(",")}//屏幕上渲染1，2，3
      <br/>
      <button
        onClick={()=>{
          addToStart(0)
          addToEnd(0)
          console.log(array)//点击按钮：控制台打印0，1，2，3，0；屏幕渲染不变
        }}
      ></button>
    </div>
  );
}

2.array数组的改变是在组件下一次渲染时，即做完本次改变，渲染到屏幕上后，下一次改变时会拿到array本次改变后的值

function addToStart(number){
    // array.unshift(number)
    // setArray(array)
    setArray([number,...array])
  }

  function addToEnd(number){
    // array.push(number)
    // setArray(array)
    setArray([...array,number])
  }

将上述函数的setState改成这样：

初次点击：屏幕上（1，2，3，0）；控制台（1，2，3）

第二次点击：屏幕上（1，2，3，0，0）；控制台（1，2，3，0）

原因是，addToStart函数在本次更新中将（1，2，3）->(0,1,2,3,);addToEnd函数在本次更新中将（1，2，3）->(1,2,3,0) 屏幕只渲染一次，后面的将前面的覆盖掉了

3.正确写法是将setState写成可将当前状态传递的回调函数

function addToStart(number){
    // array.unshift(number)
    // setArray(array)
    // setArray([number,...array])
    setArray((curArr)=>[number,...curArr])
  }

  function addToEnd(number){
    // array.push(number)
    // setArray(array)
    // setArray([...array,number])
    setArray((curArr)=>[...curArr,number])
  }