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

news2025/10/31 22:59:26

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

这两种写法界面效果没有什么不同
在这里插入图片描述
甚至我们直接这样写

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

也是可以出界面的
在这里插入图片描述
但是这样问题就来了我们在这里面是没办法创建 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;

运行结果如下
在这里插入图片描述
这样我们这种函数式就能用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 参数就是要更改后的新值

我们运行代码
在这里插入图片描述
然后点击更改按钮

我们的变量就改变了

然后我们来写两个值

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;