(四)React组件、useState

1. 组件

1.1 组件是什么

概念:一个组件就是用户界面的一部分,它可以有自己的逻辑和外观,组件之间可以相互嵌套,也可以复用多次

在这里插入图片描述
组件化开发可以让开发者像搭积木一样构建一个完整的庞大应用

1.2 React组件

在React中,一个组件就是首字母大写的函数,内部存放了组件的逻辑和视图UI,渲染组件只需要把组件当成标签书写即可。
在这里插入图片描述

2. useState

2.1 useState的基础使用

useState是一个React Hook(函数),它允许我们向组件添加一个状态变量,从而控制影响组件的渲染效果。

在这里插入图片描述

App.js

import {useState} from "react";

function App() {
    //1. 调用useState添加一个状态变量
    //count 状态变量
    //setCount 修改状态变量的方法
    const [count, setCount] = useState(0)
    // 2. 点击事件回调
    const handleClick = () => {
        //作用: 1. 用于传入的新值修改count
        //      2. 重新使用新的count渲染UI
        setCount(count + 1)
    }
    return (
        <div className="App">
            <button onClick={handleClick}>{count}</button>
        </div>
    );
}

export default App;

在这里插入图片描述

2.2 修改状态的规则

状态不可变

在React中,状态被认为是只读的,我们应该始终替换它而不是修改它,直接修改状态不能引发视图的更新。

在这里插入图片描述

修改对象状态

规则:对于对象类型的状态变量,应该始终传给set方法一个全新的对象来进行修改

在这里插入图片描述

相关推荐

  1. ReactReact API

    2024-06-09 22:02:01       14 阅读
  2. react

    2024-06-09 22:02:01       30 阅读
  3. react:profiler

    2024-06-09 22:02:01       8 阅读
  4. react :Suspense

    2024-06-09 22:02:01       11 阅读
  5. react:strictmode

    2024-06-09 22:02:01       11 阅读
  6. react:fragment

    2024-06-09 22:02:01       8 阅读

最近更新

  1. 常用的设计模式

    2024-06-09 22:02:01       0 阅读
  2. 服务器添加TLS域名证书核子之PKCS编解码

    2024-06-09 22:02:01       0 阅读
  3. WDF驱动开发-I/O请求的处理(四)

    2024-06-09 22:02:01       0 阅读
  4. Flask-RQ

    2024-06-09 22:02:01       0 阅读
  5. 《 Python趣味编程 | 从入门到就业》专栏介绍

    2024-06-09 22:02:01       0 阅读
  6. SpaTracker&CoTracker 环境配置

    2024-06-09 22:02:01       0 阅读
  7. oracle中使用临时表GLOBAL TEMPORARY TABLE

    2024-06-09 22:02:01       0 阅读
  8. python调用SDK的问题

    2024-06-09 22:02:01       0 阅读
  9. Python笔记 - 正则表达式

    2024-06-09 22:02:01       0 阅读
  10. 搭建Conda虚拟环境让python程序脚本更干净

    2024-06-09 22:02:01       0 阅读

热门阅读

  1. 前端通用样式调整方法(整理版)

    2024-06-09 22:02:01       4 阅读
  2. web 前端开发培训:深入探索与实战应用

    2024-06-09 22:02:01       5 阅读
  3. 线程+线程池+锁

    2024-06-09 22:02:01       5 阅读
  4. 多维vector定义

    2024-06-09 22:02:01       4 阅读
  5. 计算各聚类中心

    2024-06-09 22:02:01       5 阅读
  6. 程序代码问题随时记录

    2024-06-09 22:02:01       6 阅读
  7. 栈和队列的转换

    2024-06-09 22:02:01       4 阅读
  8. 全面解析LG webOS:从开发到智能电视的演进

    2024-06-09 22:02:01       6 阅读
  9. 【CS.SE】Tomcat启动闪退问题解决方法

    2024-06-09 22:02:01       4 阅读