首页 > 其他 > 详细

React hooks之useState

时间:2021-05-08 00:37:18      阅读:18      评论:0      收藏:0      [点我收藏+]

一、useState的介绍

useState是react自带的一个hook函数,它的作用是用来声明状态变量

声明的方式

const [ count , setCount ] = useState(0)

注意:这是数组的解构赋值的方式,如果不用解构赋值,则:

let _useState = useState(0)
let count = _useState[0]
let setCount = _useState[1]

例子:

import React, { useState } from ‘react‘
//点击按钮,对点击次数计数
//函数组建的方法 export default function App() { const [ count , setCount ] = useState(0) return ( <div> You clicked {count} times. <button onClick={()=>{setCount(count+1)}}>click me</button> </div> ) }

同样的功能相较于函数组件,类组件则更加繁琐:需要绑定this

import React, { Component } from ‘react‘
//点击按钮,对点击次数计数 //类组件的方法 export default class App extends Component { constructor(props){ super(props) this.state = { count : 0 } } render() { return ( <div> You clicked {this.state.count} times. <button onClick={this.addCoount.bind(this)}>click me</button> </div> ) } addCoount(){ this.setState({count:this.state.count+1}) } }

二、多状态声明的注意事项

 

React hooks之useState

原文:https://www.cnblogs.com/spikekk/p/14742040.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!