聊聊React Hook的那些事兒
什么是react hook
首先，它是在react16.8版本中引入的概念，也就說如果你的react版本低于16.8，你是不能使用的，因此在使用它的時候，一定要注意react的版本。
它將函數組件的功能升級了，原來只能在類組件中使用的state,context等都可以在函數組件中使用了。
react hook一般是以use開頭，比如useState,useEffect，通過使用這種方式，我們就能夠在函數組件中使用react的庫的功能。
react hook 的優點
相比于類組件，函數組件更好理解，類組件中的this關鍵詞，事件綁定都很讓人頭疼，而使用了react hook之后，這些問題就都可以避免了。
相比于類組件，你會發現函數組件的代碼要少得非常多，代碼看起來很簡潔，使用起來也非常的方便，雖然官方沒有說要移除類組件，但是官方更傾向使用函數組件，如果你是新入門react的話，強烈建議你使用react hook。
使用react hook 的幾個準測
雖然react hook很方便，但是也要遵循幾個原則來書寫。
只有在組件的最頂層才可以使用react hook，也就意味著，你不能在循環，條件，嵌套函數中使用它。方便點記的話就是在return之前使用它。
只在react functions 中使用hook，不要在普通的js函數中使用它，當然你可以在自定義的hooks中使用hook。
React 常用內置hook
(1) useState
顧名思義，通過使用useState，我們可以在函數組件中創建，更新，操作state.
useState使用方法很簡單，通過返回一個state變量和一個更新state變量的函數。
import { useState } from "react";
function Counter() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
Current Cart Count: {count}
<div>
<button onClick={() => setCount(count - 1)}>Add to cart</button>
<button onClick={() => setCount(count + 1)}>Remove from cart</button>
</div>
</div>
);
}
(2) useEffect
在react的生命周期中，我們有componentDidMount,componentDidUpdate,componentWillUnmount等方法，而useEffect就是整合了這些方法。
useEffect主要用在Api數據請求，更改狀態變量等地方。
useEffect有兩個參數，一個是要運行的函數，一個是包含組件的props,context,state等變量的數組。如果沒有后面依賴的數組，就表示每次渲染都要執行第一個參數的函數。
import { useState, useEffect } from "react";
function Counter() {
// Declare state variables
const [count, setCount] = useState(0);
const [product, setProduct] = useState("Eggs");
useEffect(() => {
console.log(`${product} will rule the world!`);
}, [product]);
return (
<div>
Current {product}'s count: {count}
<div>
<button onClick={() => setCount(count + 1)}>Add to cart</button>
<button onClick={() => setCount(count - 1)}>Remove from cart</button>
Change Product:{" "}
<input type="text" onChange={(e) => setProduct(e.target.value)} />
</div>
</div>
);
}
(3) useContext
它提供了一個方法可以讓數據被整個應用程序的所有組件訪問到，相當于聲明了一個全局變量，無論它被嵌套使用，還是如何使用，其它組件總是能夠訪問使用它。
它只有一個參數，就是React.createContext函數的返回值。
import React from "react";
// some mock context values
const users = [
{
name: "Harry Potter",
occupation: "Wizard",
},
{
name: "Kent Clark",
occupation: "Super hero",
},
];
export const UserContext = React.createContext(users);
import React, { useContext } from "react";
import { UserContext } from "./App";
export function UserProfile() {
const users = useContext(UserContext);
return (
<div>
{users.map((user) => (
<li>
I am {user.name} and I am a {user.occupation}!
</li>
))}
</div>
);
}
(4) useReducer
這是一個和useState很類似的hook，唯一的不同就是它允許操作邏輯更復雜的狀態更新。
它接收兩個參數，一個是更新函數，一個是初始狀態。它的返回值有兩個，一個是被處理的狀態state，一個是分派的函數。
簡單理解就是useReducer通過提供的更新函數對state進行相應的更新處理。
import { useReducer } from "react";
import ReactDOM from "react-dom";
const initialTodos = [
{
id: 1,
title: "Todo 1",
complete: false,
},
{
id: 2,
title: "Todo 2",
complete: false,
},
];
const reducer = (state, action) => {
switch (action.type) {
case "COMPLETE":
return state.map((todo) => {
if (todo.id === action.id) {
return { todo, complete: !todo.complete };
} else {
return todo;
}
});
default:
return state;
}
};
function Todos() {
const [todos, dispatch] = useReducer(reducer, initialTodos);
const handleComplete = (todo) => {
dispatch({ type: "COMPLETE", id: todo.id });
};
return (
<>
{todos.map((todo) => (
<div key={todo.id}>
<label>
<input
type="checkbox"
checked={todo.complete}
onChange={() => handleComplete(todo)}
/>
{todo.title}
</label>
</div>
))}
</>
);
}
ReactDOM.render(<Todos />, document.getElementById('root'));
自定義Hooks
通過組合使用react內置的hook，我們可以生成我們自己的hook。
//useFetch.js
import { useState, useEffect } from "react";
export function useFetch(url) {
//values
const [data, setData] = useState(null);
const [error, setError] = useState("");
useEffect(() => {
fetch(url)
.then(res => {
if (!res.ok) {
throw Error("something wrong, ?ould not connect to resource");
}
setData(res.json());
})
.then(() => {
setError("");
})
.catch( error => {
console.warn(`sorry an error occurred, due to ${error.message} `);
setData(null);
setError(error.message);
});
}, [url]);
return [data, error];
}
總結
通過使用hook，我們可以解決復雜組件之間的狀態問題，可以讓組件變得更加輕量化，更加好理解。
通過使用Hook，我們可以在無需修改組件結構的情況下復用狀態邏輯。
因為組件是有狀態的，因此才有了hook的誕生。
