React响应式数据useState

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>)
}

原文地址：https://blog.csdn.net/weixin_74261199/article/details/142714449

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！