Hook是react 16.8 新增的特性
是希望在不編寫 class的情況下 去操作state和其他react特性
Hook的話 就不建議大家使用class的形式了 當(dāng)然也可以用 這個他只是不推薦

我們還是先創(chuàng)建一個普通的react項(xiàng)目

我們之前寫一個react組件可以這樣寫

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

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

簡單說 就是聲明一個類對象 然后在里面 寫組件的基本內(nèi)容

然后 就還有一種函數(shù)式的寫法

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>
    )
}

也是可以出界面的

但是 這樣問題就來了 我們在這里面是沒辦法 創(chuàng)建 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>
        )
    }
}

這樣 就可以創(chuàng)建state
但函數(shù)這樣去聲明顯然是沒用的

那么 我們皆可以這樣寫

import React, { useState } from "react";

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

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

export default MyComponent;

運(yùn)行結(jié)果如下

這樣 我們這種函數(shù)式就能用State數(shù)據(jù)了
然后 我們修改他也可以

import React, { useState } from "react";

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

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

export default MyComponent;

注意 他這里修改數(shù)據(jù)的方法是你在聲明變量時一起聲明的 你要它叫什么 他就叫什么

例如 我這里 聲明name變量 然后修改的值的函數(shù) 我聲明叫 setName 你也可以寫其他名字
然后我們點(diǎn)擊按鈕調(diào)用setName 參數(shù)就是要更改后的新值

我們運(yùn)行代碼

然后點(diǎn)擊更改按鈕

我們的變量就改變了

然后 我們來寫兩個值

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;

運(yùn)行項(xiàng)目

我們更改和又一年都點(diǎn)一下

也是沒有任何問題文章來源地址http://www.zghlxwxcb.cn/news/detail-486532.html

到了這里，關(guān)于React Hook入門小案例 在函數(shù)式組件中使用state響應(yīng)式數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！