吉祥又成功的公司名字_成都室内设计公司排名_搜索引擎营销的概念_社群营销的具体方法

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