react hook 之useState

最新推荐文章于 2024-03-04 06:00:00 发布

我是槑槑

最新推荐文章于 2024-03-04 06:00:00 发布

阅读量248

点赞数

分类专栏： react 文章标签： react.js javascript vue.js

本文链接：https://blog.csdn.net/weixin_42132044/article/details/121837176

版权

react 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了如何在React中使用useState Hook进行状态管理，对比了与class组件的差异，展示了如何设置和更新状态。通过实例演示了如何在 TypeScript 项目中利用useState实现简单的加载指示器。

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

react hook 之useState

此为typescript版本

import { useState } from 'react';

const TestCom: React.FC = (props) => {
  const [loading, setLoading] = useState<boolean>(false);
  // setLoading就是改变loading值的方法

  return (
    <div>
      <button onClick={()=>{setLoading(true)}}>点击改变loading值</button>
    </div>
  )
}

react class组件版本

import React from 'react'

class TestCom extends React.Component {
  
  state = {
    loading: false
  }

 // 修改状态数据的值
 handlerChange=()=>{
   this.setState({
     loading: true
   })
 }
  
  // 模版
  render() {
    <div>
      <p>{this.state.loading}</p>
      <button onClick={this.handlerChange}>handlerChange</button>
    </div>
  }
}