摘要:組件的職責增長并變得不可分割。是架構的重要組成部分。有許多好處,但它們為初學者創造了入門的障礙。方法使用狀態鉤子的最好方法是對其進行解構并設置原始值。第一個參數將用于存儲狀態,第二個參數用于更新狀態。
學習目標
在本文結束時,您將能夠回答以下問題:
什么是 hooks?
如何使用hooks?
使用hooks的一些規則?
什么是custom hook(自定義鉤子)?
什么時候應該使用 custom hooks?
使用 custom hooks有什么好處?
什么是 hooks?Hooks 可以做到以下事情:
在功能組件中使用state和“hook into”的生命周期方法。
在組件之間重用有狀態邏輯,這簡化了組件邏輯,最重要的是,讓你跳過編寫classes。
如果你已經使用過React,你就會知道復雜多變,有狀態的邏輯是如何得到的,當應用程序為功能添加了幾個新功能時,就會發生組件代碼變得復雜而難以維護這種情況。為了嘗試簡化這個問題,React背后的大腦試圖找到解決這個問題的方法。
(1) 在組件之間重用有狀態邏輯
hooks允許開發人員編寫簡單,有狀態的功能組件,并在開發時花費更少的時間來設計和重構組件層次結構。怎么樣?使用鉤子,您可以在組件之間_獲取_和_分享_有狀態邏輯。
(2) 簡化組件邏輯
當您的應用程序中出現不可避免的指數級邏輯增長時,簡單的組件就回因為各種狀態邏輯和生命周期等等因素,而變得繁瑣和復雜。組件的職責增長并變得不可分割。反過來,這使編碼變得麻煩并且測試困難。
class是React架構的重要組成部分。class有許多好處,但它們為初學者創造了入門的障礙。對于class,您還必須記住將this綁定到事件處理程序,因此代碼可能變得冗長且有點多余。
如何使用hooks?React版本 16.8.
import { useState, useEffect } from "react";
很簡單,但你如何實際使用這些新方法?以下示例非常簡單,但這些方法的功能非常強大。
useState hook方法使用狀態鉤子(state hook)的最好方法是對其進行解構并設置原始值。第一個參數將用于存儲狀態,第二個參數用于更新狀態。
例如:
const [weight, setWeight] = useState(150); onClick={() => setWeight(weight + 15)}
weight是狀態
setWeight是一種用于更新狀態的方法
useState(150)是用于設置初始值(任何基本類型)的方法
值得注意的是,您可以在單個組件中多次構造狀態hook:
const [age, setAge] = useState(42); const [month, setMonth] = useState("February"); const [todos, setTodos] = useState([{ text: "Eat pie" }]);
因此,該組件可能看起來像:
import React, { useState } from "react"; export default function App() { const [weight, setWeight] = useState(150); const [age] = useState(42); const [month] = useState("February"); const [todos] = useState([{ text: "Eat pie" }]); return ( Current Weight: {weight} Age: {age} Month: {month} setWeight(weight + 15)}> {todos[0].text} ); }useEffect鉤子方法
使用effect hook 就好像使用componentDidMount, componentDidUpdate, 和 componentWillUnmount這類的生命周期的方法。
例如:
// similar to the componentDidMount and componentDidUpdate methods useEffect(() => { document.title = You clicked ${count} times; });
組件更新的任何時候,渲染后都會調用useEffect。現在,如果你只想在變量count改變時更新useEffect,你只需將該事實添加到數組中方法的末尾,類似于高階reduce方法末尾的累加器。
// check out the variable count in the array at the end... useEffect(() => { document.title = You clicked ${count} times; }, [ count ]);
讓我們結合兩個例子:
const [weight, setWeight] = useState(150); useEffect(() => { document.title = You weigh ${weight}, you ok with that?; }, [ weight ]); onClick={() => setWeight(weight + 15)}
因此,當觸發onClick時,也會調用useEffect方法,并在DOM更新后在文檔標題中呈現新的數據。
例:
import React, { useState, useEffect } from "react"; export default function App() { const [weight, setWeight] = useState(150); const [age] = useState(42); const [month] = useState("February"); const [todos] = useState([{ text: "Eat pie" }]); useEffect(() => { document.title = You weigh ${weight}, you ok with that?; }); return ( Current Weight: {weight} Age: {age} Month: {month} setWeight(weight + 15)}> {todos[0].text} ); }
useEffect非常適合進行API調用:
useEffect(() => { fetch("https://jsonplaceholder.typicode.com/todos/1") .then(results => results.json()) .then((data) => { setTodos([{ text: data.title }]); }); }, []);
React鉤子看起來很棒,但是如果你花一點時間,你可能會意識到在多個組件中重新初始化多個鉤子方法,比如useState和useEffect,可能會違背DRY(Don"t repeat yourself)原則。那么,讓我們看看如何通過創建自定義鉤子來重用這些新內置方法。
關于使用hooks的一些規則?是的,React鉤子有規則。這些規則乍一看似乎是非常規的,但是一旦你理解了React鉤子如何啟動的基礎知識,規則就很容易理解。
(1) 必須在頂層以相同的順序調用掛鉤。(依次調用)
Hooks創建一個鉤子調用數組來保持秩序。這個命令有助于React告訴區別,例如,在單個組件中或跨應用程序的多個useState和useEffect方法調用之間。
例如:
// This is good! function ComponentWithHooks() { // top-level! const [age, setAge] = useState(42); const [month, setMonth] = useState("February"); const [todos, setTodos] = useState([{ text: "Eat pie" }]); return ( //... ) }
在第一次渲染時,42,February,[{text:"Eat pie"}]都被推入狀態數組。
當組件重新渲染時,忽略useState方法參數。
age,month和todos的值是從組件的狀態中檢索的,這是前面提到的狀態數組。
(2) 無法在條件語句或循環中調用掛鉤。
由于啟動hooks的方式,不允許使用within條件語句或循環。對于hooks,如果在重新渲染期間初始化的順序發生變化,則很可能您的應用程序無法正常運行。您仍然可以在組件中使用條件語句和循環,但不能在代碼塊內使用鉤子。
例如:
// DON"T DO THIS!! const [DNAMatch, setDNAMatch] = useState(false) if (name) { setDNAMatch(true) const [name, setName] = useState(name) useEffect(function persistFamily() { localStorage.setItem("dad", name); }, []); } // DO THIS!! const [DNAMatch, setDNAMatch] = useState(false) const [name, setName] = useState(null) useEffect(() => { if (name) { setDNAMatch(true) setName(name) localStorage.setItem("dad", name); } }, []);
(3) 鉤子不能用在class組件中。
鉤子必須在功能組件或自定義鉤子函數中初始化。自定義鉤子函數只能在功能組件中調用,并且必須遵循與非自定義鉤子相同的規則。
您仍然可以在同一個應用程序中使用類組件。您可以使用hooks作為類組件的子項呈現功能組件。
(4) 自定義鉤子應該以單詞use開頭并且是駝峰式的。
這是一個強有力的建議而非規則,但它將有助于您的應用程序的一致性。你也會知道,當你看到一個以“use”為前綴的函數時,它可能是一個自定義鉤子。
自定義掛鉤只是遵循與非自定義掛鉤相同規則的函數。它們允許您整合邏輯,共享數據以及跨組件重用鉤子。
什么時候應該使用自定義hook?當您需要在組件之間共享邏輯時,最好使用自定義掛鉤。在JavaScript中,當您想要在兩個多帶帶的函數之間共享邏輯時,您可以創建另一個函數來支持它。好吧,就像組件一樣,hooks也是function。您可以提取hooks邏輯,以便在應用程序的組件之間共享。在編寫自定義hooks時,您可以命名它們(再次以“use”開頭),設置參數,并告訴它們應該返回什么(如果有的話)。
例如:
import { useEffect, useState } from "react"; const useFetch = ({ url, defaultData = null }) => { const [data, setData] = useState(defaultData); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch(url) .then(res => res.json()) .then((res) => { setData(res); setLoading(false); }) .catch((err) => { setError(err); setLoading(false); }); }, []); const fetchResults = { data, loading, error, }; return fetchResults; }; export default useFetch;使用自定義hook有什么好處?
Hooks允許您在應用程序增長時抑制復雜性,并編寫更易于理解的代碼。下面的代碼是兩個具有相同功能的組件的比較。在第一次比較之后,我們將在伴隨容器的組件中使用自定義鉤子展示更多好處。
以下類組件應該看起來:
import React from "react"; class OneChanceButton extends React.Component { constructor(props) { super(props); this.state = { clicked: false, }; this.handleClick = this.handleClick.bind(this); } handleClick() { return this.setState({ clicked: true }); } render() { return ( You Have One Chance to Click ); } } export default OneChanceButton;
如何使用鉤子實現相同的功能來簡化代碼并提高可讀性:
import React, { useState } from "react"; function OneChanceButton(props) { const [clicked, setClicked] = useState(false); function doClick() { return setClicked(true); } return ( You Have One Chance to Click ); } export default OneChanceButton;結論
React hooks是一個驚人的新功能!實施的理由是合理的;并且,再加上這一點,我相信這將極大地降低React編碼的門檻,并使其保持在最喜歡的框架之上列表。看到這會如何改變第三方庫的工作方式,尤其是狀態管理工具和路由器,將會非常令人興奮。
總之,React鉤子:
無需使用類組件即可輕松與React的生命周期方法相關聯
通過增加可重用性和抽象復雜性來幫助減少代碼量
幫助簡化組件之間共享數據的方式
推薦閱讀:https://juejin.im/post/5be8d3...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54024.html
摘要:前言樓主最近在整理的一些資料,為項目重構作準備,下午整理成了這篇文章。給傳入的是一個初始值,比如,這個按鈕的最初要顯示的是。取代了提供了一個統一的。 showImg(https://segmentfault.com/img/bVbpUle?w=900&h=550); Hooks are a new addition in React 16.8. They let you use sta...
摘要:前言樓主最近在整理的一些資料,為項目重構作準備,下午整理成了這篇文章。給傳入的是一個初始值,比如,這個按鈕的最初要顯示的是。取代了提供了一個統一的。 showImg(https://segmentfault.com/img/bVbpUle?w=900&h=550); Hooks are a new addition in React 16.8. They let you use sta...
摘要:當組件安裝和更新時,回調函數都會被調用。好在為我們提供了第二個參數,如果第二個參數傳入一個數組,僅當重新渲染時數組中的值發生改變時,中的回調函數才會執行。 前言 首先歡迎大家關注我的Github博客,也算是對我的一點鼓勵,畢竟寫東西沒法獲得變現,能堅持下去也是靠的是自己的熱情和大家的鼓勵,希望大家多多關注呀!React 16.8中新增了Hooks特性,并且在React官方文檔中新增...
摘要:到目前為止,表達這種流程的基本形式是課程。按鈕依次響應并更改獲取更新的文本。事實證明不能從返回一個。可以在組件中使用本地狀態,而無需使用類。替換了提供統一,和。另一方面,跟蹤中的狀態變化確實很難。 備注:為了保證的可讀性,本文采用意譯而非直譯。 在這個 React鉤子 教程中,你將學習如何使用 React鉤子,它們是什么,以及我們為什么這樣做! showImg(https://segm...
摘要:課程制作和案例制作都經過精心編排。對于開發者意義重大,希望對有需要的開發者有所幫助。是從提案轉為正式加入的新特性。并不需要用繼承,而是推薦用嵌套。大型項目中模塊化與功能解耦困難。從而更加易于復用和獨立測試。但使用會減少這種幾率。 showImg(https://segmentfault.com/img/bVbpNRZ?w=1920&h=1080); 講師簡介 曾任職中軟軍隊事業部,參與...
閱讀 2001·2019-08-29 16:27
閱讀 1370·2019-08-29 16:14
閱讀 3372·2019-08-29 14:18
閱讀 3455·2019-08-29 13:56
閱讀 1252·2019-08-29 11:13
閱讀 2118·2019-08-28 18:19
閱讀 3439·2019-08-27 10:57
閱讀 2273·2019-08-26 11:39