react hooks的學習補充

2021-10-10 10:32:50 字數 1407 閱讀 2427

hooks 是 react 16 中的特性,解決函式元件想使用類元件的一些特性。

一般在函式元件裡使用該hooks調介面獲取資料

useeffect不傳遞第二個引數會導致每次渲染都會執行useeffect。然後,當它執行時,它獲取資料並更新狀態。然後,一旦狀態更新,元件將重新呈現,這將再次觸發useeffect

remark:useeffect的第二個引數為乙個陣列,如果想在特定的邏輯裡面執行相關**,可以操作該陣列,陣列裡可以存放狀態

獲取getstate方法,getstate與useselelctor功能類似

共享狀態,從redux的store物件中提取資料(state)。

const obj=useselector(state=>state.obj)

簡單好用!!!

import  from 'react-redux';
返回redux store中對dispatch函式的引用。你可以根據需要使用它。

const dispatch = usedispatch();

import  from 'react-redux';
上下文 如果需要在元件之間共享狀態,可以使用usecontext()。

在兩個子元件上建立createcontext()

reducer的代替品,接受兩個引數

傳遞「建立」函式和一系列依賴項。usememo僅在其中乙個依賴項已更改時才重新計算儲存的值。此優化有助於避免對每個渲染進行昂貴的計算。

const history = usehistory();

function handleclick()

//有時列印history為undefined

函式元件

import react from 'react』

import from 'react-router-dom』

export const buttonwithrouter = withrouter(() => )

//類元件

import react from "react";

import from "react-router-dom";

class mycomponent extends react.component

...}export default withrouter(mycomponent);

返回乙個有狀態值,以及乙個更新它的函式。

ref可以用來獲取元件例項物件或者是dom物件。

而useref這個hooks函式,除了傳統的用法之外,它還可以「跨渲染週期」儲存資料。

接受兩個引數,函式和依賴項,可以快取上次的函式減小建立函式的代價

可以通過配合useref、forwordref將子元件的屬性和方法傳給父元件使用

React Hooks 學習概覽

react hooks的函式 元件方式代替原來的類繼承,簡化 風格,好處是大大的 1 usestate用來宣告狀態變數。要從三方面掌握 宣告 讀取 使用。注意 usestae是不能進行條件語句判斷的 2 useeffect就相當於 類元件中的 componentdidmount componentd...

對於React Hooks的理解

react元件可以分為類元件和函式元件。類元件具有生命週期 狀態,而函式元件卻沒有。在react 16.8新出來的hooks 可以讓react函式元件具有狀態,並且提供了類似componentdidmount和componentdidupdate等生命週期方法。栗子?我們寫乙個函式元件,如果想要更新...

redis學習 補充學習

redis是乙個開源的記憶體中的資料結構儲存系統,它可以用作 資料庫 快取和訊息中介軟體。是乙個完全開源免費的key value記憶體資料庫通常被認為是乙個資料結構伺服器,主要是因為其有著豐富的資料結構strings map list sets sorted sets1 完全基於記憶體,絕大部分請求...