当前位置：首页 > article >正文

React响应式数据useState

article 2024/10/6 11:08:50

React响应式数据useState

最近学了React，发现与Vue大有不同，在Vue中实现数据的响应式通过ref()函数，React则是通过useState()函数

使用

语法：const [data, setData] = useState(数据)

说明：将数据传给useState()，返回一个数组，第一个元素为最新数据，第二个参数为修改数据的方法

注意：实现响应式就是通过setData方法来实现的，即每次通过setData修改数据后，data就会自动拿到最新数据，用到data的地方将会重新渲染。若是直接修改data是不会触发响应式变化的！

案例：

import {useState} from "react";

export function ShowOrHideMatrix() {
   //	定义状态
   const [showStatus, setShowStatus] = useState(true)
   const Matrix = function () {
       //	使用状态
       return (showStatus && <div style={{width: '100px', height: '100px',backgroundColor: 'green'}}></div>)
   }
   const Button = function () {
       //	通过setXxx方法修改状态
       return (<button onClick={() => setShowStatus(!showStatus)}>{showStatus ? '隐藏' : '显示'}方块</button>)
   }
   return (<div> <Matrix/> <Button/> </div>)
}