前言

公司項目需要使用react，而函數(shù)式組件也是官方比較推薦的！！！所以學(xué)習(xí)hooks是很重要的。

一、什么是函數(shù)式組件

純函數(shù)組件有以下特點：

• 沒有狀態(tài)
• 沒有生命周期
• 沒有 this

因存在如上特點，使得純函數(shù)組件只能做UI展示的功能， 涉及到狀態(tài)的管理與切換就不得不用到類組件或者redux。 但因為簡單的頁面也是用類組件，同時要繼承一個React實例，使得代碼會顯得很重。

以前我們可以使用class來聲明一個組件，其實使用function也可以定義一個組件：

創(chuàng)建 App1.js ：

import React from 'react'
function App1(){
    return (
        <div>
            <h1>函數(shù)式組件</h1>
        </div>
    )
}
export default App1;

備注：

在vscode中，如果安裝過 ES7 React/Redux/GraphQL/React-Native snippets 這個插件，即可直接使用 rfc 快捷鍵敲出以下模板：

import React from 'react';
const App = () => {
    return (
        <div>
            
        </div>
    );
}
export default App;

在 index.js 中調(diào)用：

import ReactDOM from 'react-dom'
import App from './App1'
ReactDOM.render(
    <App />,
    document.getElementById('root')
)

二、useState

useState讓函數(shù)組件有了state狀態(tài)，可以對狀態(tài)數(shù)據(jù)進行讀寫操作

語法：const [變量名,修改變量的方法名] = React.useState(初始值)

修改變量的方法名(setXxx)有兩種寫法:

setXxx(newValue):參數(shù)為非函數(shù)值，直接指定新的狀態(tài)值，內(nèi)部用器覆蓋原來的狀態(tài)值。

setXxx(value => newValue):參數(shù)為函數(shù)，接收原本的狀態(tài)值，返回新的狀態(tài)值 ，內(nèi)部用器覆蓋原來的狀態(tài)值。

現(xiàn)在我們改成函數(shù)式編程實現(xiàn)累加案例：

// useState就是hooks提供的一個api
import React, { useState } from 'react'
function App(){
  	// 這里useState(0)中的0，就是定義num的初始值，setNum是修改num的方法
    const [num, setNum] = useState(0);

    return (
        <div>
            <h2>{num}</h2>
            <button onClick={()=>{setNum(num+1)}}>點擊加1</button>
        </div>
    )
}
export default App;