React Hook入门小案例 在函数式组件中使用state响应式数据

这篇具有很好参考价值的文章主要介绍了React Hook入门小案例 在函数式组件中使用state响应式数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Hook是react 16.8 新增的特性
是希望在不编写 class的情况下 去操作state和其他react特性
Hook的话 就不建议大家使用class的形式了 当然也可以用 这个他只是不推荐

我们还是先创建一个普通的react项目

我们之前写一个react组件可以这样写

import React from "react";
export default class AppRouter extends React.Component{

    render(){
        return (
            <div>
                Hello World
            </div>
        )
    }
}

简单说 就是声明一个类对象 然后在里面 写组件的基本内容

然后 就还有一种函数式的写法

import React from "react";
function dom1(){
    return (
        <div>
            Hello World
        </div>
    )
}

export default dom1

这两种写法界面效果没有什么不同
React Hook入门小案例 在函数式组件中使用state响应式数据
甚至我们直接这样写

import React from "react";
export default () => {
    return (
        <div>
            Hello World
        </div>
    )
}

也是可以出界面的
React Hook入门小案例 在函数式组件中使用state响应式数据
但是 这样问题就来了 我们在这里面是没办法 创建 state和生命周期的

在中我们可以这样写

import React from "react";
import axios from "axios";

export default class AppRouter extends React.Component{
    state = {
        name: "小猫猫"
    }

    render(){
        return (
            <div>
                { this.state.name }
            </div>
        )
    }
}

这样 就可以创建state
但函数这样去声明显然是没用的

那么 我们皆可以这样写

import React, { useState } from "react";

const MyComponent = () => {
  const [name] = useState("小猫猫");

  return (
    <div>
      {name}
    </div>
  );
};

export default MyComponent;

运行结果如下
React Hook入门小案例 在函数式组件中使用state响应式数据
这样 我们这种函数式就能用State数据了
然后 我们修改他也可以

import React, { useState } from "react";

const MyComponent = () => {
  const [name,setName] = useState("小猫猫");

  return (
    <div>
      {name}
      <button onClick={ ()=> { setName("大猫猫")} }>更改</button>
    </div>
  );
};

export default MyComponent;

注意 他这里修改数据的方法是你在声明变量时一起声明的 你要它叫什么 他就叫什么

例如 我这里 声明name变量 然后修改的值的函数 我声明叫 setName 你也可以写其他名字
然后我们点击按钮调用setName 参数就是要更改后的新值

我们运行代码
React Hook入门小案例 在函数式组件中使用state响应式数据
然后点击更改按钮
React Hook入门小案例 在函数式组件中使用state响应式数据
我们的变量就改变了

然后 我们来写两个值

import React, { useState } from "react";

const MyComponent = () => {
  const [name,setName] = useState("小猫猫");
  const [age,setAge] = useState(2);

  return (
    <div>
      {name}
      {age}
      <button onClick={ ()=> { setName("大猫猫")} }>更改</button>
      <button onClick={ ()=> { setAge(age+1)} }>又一年</button>
    </div>
  );
};

export default MyComponent;

运行项目
React Hook入门小案例 在函数式组件中使用state响应式数据
我们更改和又一年都点一下
React Hook入门小案例 在函数式组件中使用state响应式数据
也是没有任何问题文章来源地址https://www.toymoban.com/news/detail-486532.html

到了这里,关于React Hook入门小案例 在函数式组件中使用state响应式数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • react使用hook封装一个tab组件

    2024年02月09日
    浏览(47)
  • React 通过一个输入内容加入列表案例熟悉 Hook 基本使用

    我们创建一个react项目 在src下创建components文件夹 在下面创建一个index.jsx index.jsx 参考代码如下 首先 我们通过一个比较典型的方法定义了一个用于声明表单元素绑定响应式数据的的函数useInputValue 接收一个参数 用于做响应式数据的默认值 然后暴露他的value 同时 绑定了一个o

    2024年02月09日
    浏览(47)
  • React 18 用 State 响应输入

    参考文章 React 控制 UI 的方式是 声明式 的。不必直接控制 UI 的各个部分,只需要声明组件可以处于的不同状态,并根据用户的输入在它们之间切换。这与设计师对 UI 的思考方式很相似。 当设计 UI 交互时,可能会去思考 UI 如何根据用户的操作而响应 变化 。想象一个允许用

    2024年02月12日
    浏览(30)
  • React Hook - useEffecfa函数的使用细节详解

    useEffecf基本使用 书接上文, 上一篇文章我们讲解了State Hook, 我们已经可以通过这个hook在函数式组件中定义state 我们知道在类组件中是可以有生命周期函数的, 那么如何在函数组件中定义类似于生命周期这些函数呢? Effect Hook 可以让你来完成一些类似于class中生命周期的功能; 事

    2023年04月12日
    浏览(35)
  • 【《React Hooks实战》——指导你使用hook开发性能优秀可复用性高的React组件】

    使用React Hooks后,你很快就会发现,代码变得更具有组织性且更易于维护。React Hooks是旨在为用户提供跨组件的重用功能和共享功能的JavaScript函数。利用React Hooks, 可以将组件分成多个函数、管理状态和副作用,并且不必声明类即可调用React内置的功能。而且,上述所有的操作

    2024年02月14日
    浏览(35)
  • React初体验-Hello React的组件化方式-React入门小案例

    接下来我们通过Hello React的案例, 来体验一下React开发模式, 以及jsx的语法 Hello React案例演练 第一步: 先引入React开发依赖 第二步: 这里我们编写React的script代码中,必须添加 type=\\\"text/babel\\\" ,作用是可以让babel解析jsx的语法 第三步: 创建元素渲染到页面 React18之前的做法: 通过 R

    2023年04月08日
    浏览(64)
  • 初识React/JSX/组件/state/受控组件

                                               

    2024年02月12日
    浏览(60)
  • 关于在微信小程序中使用taro + react-hook后销毁函数无法执行的问题

    问题: 在 taro中使用navigageTo() 跳转路由后hook中useEffect 的return函数没有执行 没有执行return函数 框架版本:      tarojs:  3.6                            react:   18.0    原因: 使用navigateTo() 跳转路由的话并不会销毁页面和组件,会加入一个最大数量为十层的路由

    2024年01月24日
    浏览(45)
  • React 组件的3大属性: state

    组件被称为\\\"状态机\\\", 页面的显示是根据组件的 state 属性的数据来显示。 state 是一个用于存储和管理组件内部数据的机制。 它是一种在组件中跟踪状态变化的方式,以便在数据发生变化时,React 可以更新用户界面以反映这些变化。 state 的使用在构建交互式和动态的用户界面

    2024年02月10日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包