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

这两种写法界面效果没有什么不同

甚至我们直接这样写

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;

运行项目

我们更改和又一年都点一下

也是没有任何问题