組件

1.是返回標(biāo)簽的js函數(shù)，是可重復(fù)利用的UI元素

function test(){
return (

test

);
}

2.構(gòu)建組件：

（1）export 導(dǎo)出組件

（2）定義函數(shù)，名稱必須以大寫字母開頭

（3）添加標(biāo)簽

3.具名導(dǎo)出

將test組件從test.tsx導(dǎo)出

import { test } from ‘./test’

4.JSX標(biāo)簽只能返回一個根元素，用父標(biāo)簽包裹

標(biāo)簽必須閉合

駝峰命名

5.JSX與大括號

通過{}使用JS變量

使用場景：jsx內(nèi)的文本，=后的屬性

{{}}，包裹的對象

6.props傳遞

Props 反映了組件在任何時間點(diǎn)的數(shù)據(jù)

傳遞：通過jsx

讀取：

function Avatar({ person, size }) {
// 在這里 person 和 size 是可訪問的
}

7.條件渲染

if語句，&&和？：運(yùn)算符選擇性渲染jsx

{cond ? : } 表示 “當(dāng) cond 為真值時, 渲染 ，否則 ”

{cond && } 表示 “當(dāng) cond 為真值時, 渲染 ，否則不進(jìn)行渲染”

8.渲染列表

數(shù)據(jù)存在列表中，通過map()或filter()遍歷，用

• 包裹并返回

直接放在map()方法中的元素要指定key，一般使用能從給定數(shù)據(jù)中穩(wěn)定取得的值

State和生命周期

useState的唯一參數(shù)是state變量的初始值，state變量保存上次渲染的值，state setter函數(shù)更新state并觸發(fā)react重新渲染組件

state是隔離且組件私有的

state管理部分

沒有在網(wǎng)站上找到生命周期的內(nèi)容

23-06-21

Hook

1.Hooks ——以 use 開頭的函數(shù)——只能在組件或自定義 Hook的最頂層調(diào)用，不能在條件語句、循環(huán)語句或其他嵌套函數(shù)內(nèi)調(diào)用 Hook。

useState

setState是異步的，雖然時間很短，但不足以在上一行代碼設(shè)置，下一行代碼就使用，即state 的值始終”固定“在一次渲染的各個事件處理函數(shù)內(nèi)部。

批處理：React 會等到事件處理函數(shù)中的所有代碼都運(yùn)行完畢再處理 state 更新。這允許更新多個變量，而不會觸發(fā)太多次重新渲染。但也因此只有其他代碼執(zhí)行完畢后，ui才會更新。

如果想在下一次渲染之前多次更新同一個state，可以像setNumber(n => n + 1)傳入更新函數(shù)。

組件的渲染：初次渲染、修改state會觸發(fā)組件渲染

只想更新state中對象的部分屬性，可以使用…對象傳播語法，更新嵌套對象，需要一層層展開

setPerson({
…person, // Copy the old fields
firstName: e.target.value // But override this one
});

更新state中的數(shù)組：

添加元素，concta，[…arr]，why？因為state只能通過setstate修改，使用[].push會修改state

刪除元素，filter，slice

替換，map

排序，先用臨時變量拷貝數(shù)組（淺拷貝），排序后再用setState

構(gòu)建state的原則：

合并關(guān)聯(lián)的state

避免互相矛盾的state

避免冗余的state，如果可以使用兩個state表達(dá)第三個state，那就不需要三個state

避免重復(fù)的state

避免深度嵌套的state

狀態(tài)提升：

當(dāng)希望兩個組件的狀態(tài)始終同步更改，可以將相關(guān) state 從這兩個組件上移除，并把 state 放到它們的公共父級，再通過 props 將 state 傳遞給這兩個組件

移除一個組件的時候，也會銷毀它內(nèi)部的state，只有在相同位置渲染同樣的組件，才保留。

可以通過為一個子樹指定一個不同的 key 來重置它的 state。

useContext

Context 使組件向其下方的整個樹提供信息（傳遞多層）

使用場景：

主題，在應(yīng)用頂層放一個 context provider，提供一個統(tǒng)一的主題模式

當(dāng)前賬戶，許多子組件需要當(dāng)前登陸的用戶信息

路由

狀態(tài)管理

創(chuàng)建方法：

通過 export const MyContext = createContext(defaultValue) 創(chuàng)建并導(dǎo)出 context。

在無論層級多深的任何子組件中，把 context 傳遞給 useContext(MyContext) Hook 來讀取它。

在父組件中把 children 包在 <MyContext.Provider value={…}> 中來提供 context。

Context 會穿過中間的任何組件

useRef

使用場景：記住一些信息，但不想讓這些信息觸發(fā)渲染

通過ref.current訪問數(shù)據(jù)

更改時不會觸發(fā)重新渲染，可以在渲染過程之外修改和更新current的值

子組件使用父組件的ref時，直接往子組件傳ref

父組件使用子組件的ref時需要使用forwardRef

23-06-25

useEffect

useEffect(() => {
// This runs after every render
});

useEffect(() => {
// This runs only on mount (when the component appears)
}, []);

useEffect(() => {
// This runs on mount and also if either a or b have changed since the last render
}, [a, b]);

return：一般返回一個清理函數(shù)，每次effect再次運(yùn)行之前，react都會調(diào)用這個清理函數(shù)，最后一次是在組件卸載（被刪除）時調(diào)用。

effect是由渲染本身引起的，默認(rèn)情況下，effect在初始渲染和每次再次渲染后運(yùn)行。

依賴項為空時，僅在組件掛載時執(zhí)行。

所使用的所有依賴都要寫到依賴項中。

如果Effect 的所有依賴項都具有與上次渲染期間相同的值，React 將跳過 Effect。

在嚴(yán)格模式下，React 會掛載組件兩次（僅在開發(fā)中）來對effect進(jìn)行壓力測試。

什么時候應(yīng)該使用：

1.控制非react的ui部件：某些api不允許連續(xù)調(diào)用兩次，因此在重新渲染前應(yīng)該先關(guān)閉（通過清理函數(shù)），再重新調(diào)用

2.訂閱：訂閱了某些內(nèi)容，每次只能有一個activate的訂閱

3.觸發(fā)動畫：清理函數(shù)中需要把時間軸重置為初始狀態(tài)

4.獲取數(shù)據(jù)：通過數(shù)據(jù)請求鏈接獲取數(shù)據(jù)，清理函數(shù)中需要中斷數(shù)據(jù)鏈接或忽略之前請求的數(shù)據(jù)結(jié)果

5.發(fā)送analytics

不必要的場景：

1.能夠根據(jù)state或者props來更新state

2.用useMemo換成昂貴的計算結(jié)果

useState

const [state, setState] = useState(initialState);

向組件添加狀態(tài)

set函數(shù)允許將state更新為不同的值并觸發(fā)渲染

提供的新值與當(dāng)前state相同，將skip re-rendering 組件及其子組件

調(diào)用set函數(shù)不會改變運(yùn)行代碼中的狀態(tài)

import React from ‘react’
import {View,Text,Button} from ‘@mrn/react-native’
import {useState} from ‘react’
export function test(){
const [count,setCount]=useState(1);
function handleClick(){
setCount(count+1);
}
return (
<>


function test+{count}



</>);
}

useEffect

將組件與外部系統(tǒng)（不受react控制的代碼）同步

useEffect(setup, dependencies?)

setup：具有效果邏輯的function，dependencies：需要包括在function中使用到的組件中的每個值

return undefined

import { useEffect } from ‘react’;
import { createConnection } from ‘./chat.js’;

function ChatRoom({ roomId }) {
const [serverUrl, setServerUrl] = useState(‘https://localhost:1234’);

useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.connect();//連接
return () => {
connection.disconnect();//斷開
};
}, [serverUrl, roomId]);
// …
}

useCallback

在重新渲染之間緩存function定義（？）

const cachedFn = useCallback(fn, dependencies)

fn：要緩存的函數(shù)值，dependencies：fn中涉及到的所有的reactive values

return 傳遞的function

使用：

1.跳過組件的重新渲染：當(dāng)一個組件重新渲染時，React 會遞歸地重新渲染它的所有子組件，通過useCallback包裝的function，可以保證它在重新渲染是相同的function

2.從被memorized的callback（？）中更新state

3.防止Effect過于頻繁地觸發(fā)

4.優(yōu)化自定義Hook

useMemo

在重新渲染之間緩存計算結(jié)果

const cachedValue = useMemo(calculateValue, dependencies)

calculateValue：計算要緩存的值的函數(shù)

初次渲染時，返回不帶參數(shù)，下一次渲染期間返回上次渲染中已存儲的值

使用：

1.跳過昂貴的重新計算

2.跳過組件的重新渲染

3.記憶另一個Hook依賴

4.記憶一個function

useRef

引用一個不需要渲染的值

const ref = useRef(initialValue)

initialValue：ref 對象的 current 屬性的初始值?？梢允侨我忸愋偷闹?。這個參數(shù)會首次渲染后被忽略。

返回一個只有一個屬性的對象:

current：最開始被設(shè)置為傳遞的 initialValue。之后可以把它設(shè)置為其他值。如果把 ref 對象作為一個 JSX 節(jié)點(diǎn)的 ref 屬性傳遞給 React，React 將為它設(shè)置 current 屬性。

在后續(xù)的渲染中，useRef 將返回同一個對象。

可以修改ref.current的屬性，除了初始化以外不要在渲染期間寫入 或者讀取 ref.current

使用：

1.用ref引用一個值

2.操作DOM

3.避免重復(fù)創(chuàng)建ref的內(nèi)容文章來源地址http://www.zghlxwxcb.cn/news/detail-693538.html

到了這里，關(guān)于react 大雜燴的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！