react hooks useState

爱被打了一巴掌 2023-07-06 11:34 2阅读 0赞

react-hooks写法

直接用函数形式完成 ()=>\{setCount(count+1)\}

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

useState的用法，分别是声明、读取、使用（修改）

useState这个函数接收的参数是状态的初始值

React Hooks不能出现在条件判断语句中，因为它必须有完全一样的渲染顺序

**例如 不能出现以下：这样的代码**

if(showSex){
        const [ sex , setSex ] = useState('男')
        showSex=false
    }

import React, {useState} from 'react'
    function Demo1(){
        它返回一个数组，这个数组的第0位是当前的状态值，第1位是可以改变状态值的方法函数
        const [ count ,setCount ] = useState(0);
        return (
            <div>
                <p>当前数字是 {count} </p>
                <button onClick={()=>{setCount(count+1)}}>点击我</button>
            </div>
        )
    }
    export default Demo1;

**旧的类组件的写法：**

import React, { Component } from 'react';
    
    class Demo1 extends Component {
        constructor(props) {
            super(props);
            this.state = { 
                count:0 
            }
        }
        render() { 
            return (
                <div>
                    <p>当前数字是 {this.state.count} </p>
                    <button onClick={this.addCount.bind(this)}>Chlick me</button>
                </div>
            );
        }
        addCount(){
            this.setState({
                count:this.state.count+1
            })
        }
    }
     
    export default Demo1;

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 React教程：4 个 useState Hook 示例

*摘要：** React示例教程。 * 原文：[快速了解 React Hooks 原理][React Hooks] * 译者：前端小智到 React 16....

柔情只为你懂/ 2024年04月17日 05:28/ 0 赞/ 72 阅读

相关 React hooks中 useState踩坑-=--异步问题

useState作为最常见的一个hook，在使用中总是会出现各种坑，最明显的就是 `useState` 更新异步的问题。比如我们把接口返回的数据，使用 `useState`

墨蓝/ 2024年04月01日 15:02/ 0 赞/ 97 阅读

相关解释一下React中的钩子（hooks），例如useState和useEffect。

聚沙成塔·每天进步一点点 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感

深藏阁楼爱情的钟/ 2024年02月20日 08:31/ 0 赞/ 58 阅读

相关 React Hook - useState函数的详细解析

useState的详细解析在上一篇文章中, 我用到useState来让大家体验一下hooks函数 import { memo, useSta

小咪咪/ 2023年10月02日 21:00/ 0 赞/ 7 阅读

相关使用react，hooks钩子时useState更新不渲染组件的问题

react中，hooks钩子时useState更新不渲染组件的问题 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sha

矫情吗；*/ 2023年07月21日 06:17/ 0 赞/ 60 阅读

相关 react hooks useState

react-hooks写法直接用函数形式完成 ()=>\{setCount(count+1)\} useState是react自带的一个hook函数，它的作用是用来声明状

爱被打了一巴掌/ 2023年07月06日 11:34/ 0 赞/ 3 阅读

相关 React Hook之useState、useReducer的使用和源码分析

React Hook 16.8以前一般使用类组件或者函数组件；前者有完整的生命周期API，可以管理组件状态，但是this指向在使用时需要格外注意一；一般通过HO

r囧r小猫/ 2023年03月14日 13:12/ 0 赞/ 33 阅读

相关 React Hook “useState“ is called in function xx which is neither a React function component or

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

川长思鸟来/ 2022年12月27日 08:17/ 0 赞/ 216 阅读

相关深度理解react的useState()

理解并使用react的useState 1、为什么有了这个方法 useState()是专门用在函数组件中的，因为函数组件本来是没有状态的组件，而类组件中可以通过 th

小鱼儿/ 2022年11月16日 01:28/ 0 赞/ 252 阅读

相关 react-hooks知识梳理—1.useState

1.函数组件和类组件函数组件：被动的接受props,不能有自己的状态，也不能有自己的生命周期，类组件复用的问题，只要函数里面有this，这个函数就不纯类组件：使用s

待我称王封你为后i/ 2022年10月31日 00:59/ 0 赞/ 67 阅读