資訊專欄INFORMATION COLUMN
摘要：的來(lái)源鉤子，顧名思義，為了解決在函數(shù)組件中使用和生命周期，同時(shí)提高業(yè)務(wù)邏輯復(fù)用。函數(shù)組件等同于一個(gè)純的專門用作渲染的函數(shù)，我們知道，在函數(shù)組件中，我們無(wú)法使用和生命周期，這也是為了解決的問(wèn)題。
Hooks的來(lái)源
Hooks => 鉤子，顧名思義，為了解決在函數(shù)組件（Function Component）中使用state和生命周期，同時(shí)提高業(yè)務(wù)邏輯復(fù)用。第一個(gè)API: useStateFunction Component == Puer Render Function 函數(shù)組件等同于一個(gè)純的專門用作渲染的函數(shù)，我們知道，在函數(shù)組件中，我們無(wú)法使用state和生命周期，這也是Hooks為了解決的問(wèn)題。
import { useState } from react // 引入
const [count, setCount] = useState(0)
相當(dāng)于
this.state ={ count = 0} 所以 useState(arg)放數(shù)組 字符串 對(duì)象都可以，就是起到一個(gè)初始化state的作用
setCount 相當(dāng)于 this.setState({count: count})
count = count + 1 這樣的寫法是錯(cuò)的，不能直接修改state的值，需要使用setCount(value)
我們可以聲明多個(gè)狀態(tài)
第二個(gè)API: useEffect
這個(gè)函數(shù)是為了解決當(dāng)狀態(tài)或者傳入的props發(fā)生變化后，需要做出的邏輯處理
比如： count + 1 后， 就會(huì)觸發(fā)
useEffect( () => {
// 邏輯處理在這里
}, [count]) //第二個(gè)參數(shù)是綁定需要監(jiān)聽變化的參數(shù)
下面是一個(gè)完整的例子
父組件中傳入的props value 每秒 + 1 父組件就不貼代碼了，文末有完整代碼地址
這個(gè)項(xiàng)目里包含自定義Hook 以及useEffect的觸生命周期，包含自身state以及父組件傳入prop改變后，useEffect的用法
import React from "react";
import { useState, useEffect } from "react";
// 自定義hooks
function diyHooks (value) {
const [flag, setFlag] = useState(false);
useEffect(() => {
if(value % 2 === 0) {
setFlag(true)
} else {
setFlag(false)
}
console.log(flag)
}, [value])
return flag;
}
function Try (props) {
const [count, setCount] = useState(0)
const [number, setNumber] = useState(0)
const value = props.value
const flag = diyHooks(props.value)
useEffect(() => {
console.log("count", count);
}, [count])
useEffect(() => {
console.log("number", number);
}, [number])
useEffect(() => {
console.log("props", value)
}, [value])
return (
{flag === true ? "true" : "false"}
{value}
)
}
export default Try;
關(guān)于自定義hooks，我寫了一個(gè)react-hooks 介紹了React Hooks的簡(jiǎn)單用法
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/100961.html
摘要：此優(yōu)化有助于避免在每個(gè)渲染上進(jìn)行昂貴的計(jì)算。同樣也是一個(gè)函數(shù)，接受兩個(gè)參數(shù)，第一個(gè)參數(shù)為函數(shù)，第二個(gè)參數(shù)為要比對(duì)的值，返回一個(gè)值。同理，第二個(gè)參數(shù)傳入的值沒(méi)有更新時(shí)，不會(huì)執(zhí)行。以上代碼的地址為初體驗(yàn) 什么是Hooks？Hooks是react即將推出的功能，它允許您在不編寫類的情況下使用狀態(tài)和其他React功能。我的理解就是可以用寫無(wú)狀態(tài)組件的方式去編寫擁有狀態(tài)的組件。遺憾的是，正式版1...
摘要：本文是學(xué)習(xí)了年新鮮出爐的提案之后，針對(duì)異步請(qǐng)求數(shù)據(jù)寫的一個(gè)案例。注意，本文假設(shè)了你已經(jīng)初步了解的含義了，如果不了解還請(qǐng)移步官方文檔。但不要忘記和上下文對(duì)象可以看做是寫法的以及三個(gè)鉤子函數(shù)的組合。 本文是學(xué)習(xí)了2018年新鮮出爐的React Hooks提案之后，針對(duì)異步請(qǐng)求數(shù)據(jù)寫的一個(gè)案例。注意，本文假設(shè)了：1.你已經(jīng)初步了解hooks的含義了，如果不了解還請(qǐng)移步官方文檔。（其實(shí)有過(guò)翻譯...
摘要：我們目前的計(jì)劃是為不安全生命周期引入別名，和。從現(xiàn)在開始，只有新的生命周期名稱將起作用。從版本開始，更新以響應(yīng)更改的推薦方法是使用新的靜態(tài)生命周期。 注釋：本文是根據(jù)React的官方博客翻譯而成（文章地址：https://reactjs.org/blog/2018...）。主要講述了React之后的更新方向，以及對(duì)之前生命周期所出現(xiàn)的問(wèn)題的總結(jié)，之后的React將逐步棄用一些生命周期和...
閱讀 2505·2023-04-25 19:31
閱讀 2239·2021-11-04 16:11
閱讀 2805·2021-10-08 10:05
閱讀 1515·2021-09-30 09:48
閱讀 2315·2019-08-30 15:56
閱讀 2406·2019-08-30 15:56
閱讀 2174·2019-08-30 15:53
閱讀 2268·2019-08-30 15:44
