第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

useEffect與useLayoutEffect 區(qū)別

作用

? ? 讓組件中的函數(shù)跟隨狀態(tài)更新

注意

? ? 優(yōu)化函數(shù)組件中的功能函數(shù)

使用

? ? 第一個(gè)參數(shù)為函數(shù)

? ? 第二個(gè)參數(shù)為依賴列表

? ? 返回的是值，而非函數(shù)

const?getDoubleNum?=?useMemo(()=>{
??console.log('獲取雙倍的num');
??return?2*?num
},?[num])

作用

? ? dom更新完成后執(zhí)行某個(gè)操作

注意

? ? 有dom操作的副作用 hooks

? ? 在dom更新之后執(zhí)行

使用

? ? 跟 useEffect 使用一樣

? ? useLayoutEffect 比 useEffect 先執(zhí)行

? ? ｜ useEffect 相當(dāng)于類組件 componentDidMount

? ? ｜ useLayoutEffect 相當(dāng)于類組件 componentWillMount

? ? 參數(shù)1 為函數(shù)，參數(shù)2為依賴列表，可以返回一個(gè)函數(shù)

useEffect 與 useLayoutEffect不同點(diǎn)：執(zhí)行時(shí)機(jī)

? ? useEffect 在 render之后執(zhí)行

? ? useLayoutEffect 在 dom更新之后執(zhí)行

作用

? ? 給沒(méi)有生命周期的組件，添加結(jié)束渲染的信號(hào)

注意

? ? useEffect在render之后執(zhí)行

使用

? ? 1. 引用

? ? ? ? import React, {useEffect} from 'react';

? ? 2. 調(diào)用，useEffect在每次組件結(jié)束渲染時(shí)調(diào)用

useEffect(()=>{
??console.log('函數(shù)組件結(jié)束渲染');
??return?()=>{
????console.log('返回函數(shù)');
??}
},?[num])

? ? ? ? 第一個(gè)參數(shù)接收一個(gè)函數(shù)

? ? ? ? 第二個(gè)參數(shù)接收依賴列表，只有依賴更新才會(huì)執(zhí)行函數(shù)

? ? ? ? 返回一個(gè)函數(shù)，先執(zhí)行返回函數(shù)，再執(zhí)行參數(shù)函數(shù)

作用

? ? 函數(shù)組件添加狀態(tài)

注意事項(xiàng)

? ? 初始化以及更新state

? ? 用來(lái)聲明狀態(tài)變量

使用useState來(lái)創(chuàng)建狀態(tài)

? ? 1. 引入

? ? ? ? import React, {useState} from 'react';

? ? 2. 接受一個(gè)參數(shù)作為初始值

? ? ? ? const [name, setName] = useState('函數(shù)')

? ? 3. 返回一個(gè)數(shù)組，第一個(gè)值為狀態(tài)，第二個(gè)為改變狀態(tài)的函數(shù)

? ? ? ? <div onClick={()=>{setName('小函數(shù)')}}>? 這是一個(gè)函數(shù)組件 - {name}

? ? ? ? </div>

? ? 完整代碼

import?React,?{useState}?from?'react';

//?使用useState來(lái)創(chuàng)建狀態(tài)
//?1.?引入
//?2.?接受一個(gè)參數(shù)作為初始值
//?3.?返回一個(gè)數(shù)組，第一個(gè)值為狀態(tài)，第二個(gè)為改變狀態(tài)的函數(shù)
function?StateFunction(){
??const?[name,?setName]?=?useState('函數(shù)')

??return?(
????<div?onClick={()=>{setName('小函數(shù)')}}>
??????這是一個(gè)函數(shù)組件?-?{name}
????</div>
??)
}

export?default?StateFunction;

文件介紹

? ? 常用文件夾

? ? ? ? pages? ?→? 頁(yè)面

? ? ? ? components? ? →? 組件

? ? ? ? utils? →? 公共函數(shù)

? ? ? ? images? ?→? 圖片

? ? 移動(dòng)文件夾

? ? ? ? App.js 移動(dòng)到 pages中

? ? ? ? logo.svg 移動(dòng)到images中

? ? ? ? 注意：webstorm移動(dòng)文件可以自動(dòng)改變路徑地址

通過(guò)腳手架搭建項(xiàng)目

? ? 如果沒(méi)安裝過(guò) create-react-app 可以全局安裝

? ? ? ? npm install create-react-app -g

? ? ? ? create-react-app -V??

? ? ? ? ｜ 查看版本

? ? create-react-app react-hooks

? ? ｜ 創(chuàng)建一個(gè)名為react-hook的react項(xiàng)目

? ? code . 打開(kāi)編輯器

? ? npm start?

? ? ｜ 啟動(dòng)項(xiàng)目，在webstorm 中可以Ctrl+Enter代替

三大框架對(duì)比

? ? Anguar

? ? ? ? ?雙向數(shù)據(jù)綁定

? ? ? ? 強(qiáng)大的、豐富的模板指令

? ? ? ? 模板能力非常強(qiáng)大

? ? ? ? 靜態(tài)路由

? ? ? ? 代碼自由度較低

? ? Vue

? ? ? ? 輕量，簡(jiǎn)潔易用

? ? ? ? 雙向數(shù)據(jù)綁定

? ? ? ? 模板能力較強(qiáng)

? ? ? ? 動(dòng)態(tài)路由

? ? ? ? 插件化

? ? React

? ? ? ? 自由度很高

? ? ? ? 一切都是JS

? ? ? ? 可以與三方類褲很好的配合

? ? ? ? 單向數(shù)據(jù)流

React新版本特性

? ? render 支持返回?cái)?shù)組和字符串

? ? 錯(cuò)誤邊界

? ? 提升SSR渲染速度，支持流式渲染（邊下載邊渲染）

? ? 減少文件體積

? ? createContext? 不必一層一層傳遞，此方法可以指定生效范圍

? ? hooks開(kāi)發(fā)方式大更新

Hooks出現(xiàn)的意義

? ? 讓函數(shù)有了狀態(tài)管理

? ? 解決了組件樹(shù)不直觀、類組件難維護(hù)、邏輯不易復(fù)用的問(wèn)題

為什么要學(xué)習(xí)Hooks

? ? 開(kāi)發(fā)效率

? ? 提高組件復(fù)用性

? ? 提高邏輯復(fù)用性

? ? 提升性能

? ? 實(shí)現(xiàn)更復(fù)雜的功能

Hooks的使用場(chǎng)景

? ? 利用Hooks取代生命周期函數(shù)

? ? 讓函數(shù)組件加上狀態(tài)

? ? 組件輔助函數(shù)

? ? 處理發(fā)送請(qǐng)求

? ? 存取數(shù)據(jù)

? ? 做好性能優(yōu)化

1

2

useEffect，useLayoutEffect相同點(diǎn)，不同點(diǎn)

hooks

watching arguments and useeffect function render end

usestate用法

hooks應(yīng)用場(chǎng)景

1. useEffect如果不設(shè)置第二個(gè)參數(shù)，則每次重新渲染的時(shí)候，effect都會(huì)執(zhí)行一遍，對(duì)于例如綁定DOM事件這種，只需要綁定一次的，性能開(kāi)銷會(huì)很大。

2. 可以通過(guò)設(shè)置第二個(gè)參數(shù)來(lái)優(yōu)化性能，第二個(gè)參數(shù)接收依賴列表，即依賴列表中的數(shù)據(jù)有變化的時(shí)候，

   才會(huì)執(zhí)行effect，對(duì)于綁定DOM事件這種，不需要依賴任何數(shù)據(jù)變化的effect，第二個(gè)參數(shù)可以設(shè)置空數(shù)組以優(yōu)化性能

3. useEffect鉤子的effect函數(shù)會(huì)返回一個(gè)限制性函數(shù)，總是先執(zhí)行里面的限制性函數(shù)，才會(huì)繼續(xù)執(zhí)行effect

useReducer

useRef

由于異步更新作用廢棄掉了componentWillMount（與函數(shù)組件中useLayoutEffect類似）

- hooks 寫法的作用：

1. ????高效開(kāi)發(fā)

2. 提高組件的復(fù)用性

3. 提高邏輯復(fù)用性

4. 提升性能

5. 函數(shù)組件能提供比類組件更加細(xì)致的顆粒度，所以在實(shí)現(xiàn)某些細(xì)致的功能的時(shí)候更加方便

- hooks 組件的使用場(chǎng)景：

1. 利用hooks 組件取代生命周期函數(shù)

2. 讓函數(shù)組件加上狀態(tài)，這樣函數(shù)組件就有了自己的狀態(tài)，可以自己管理自己的狀態(tài)

3. 組件輔助函數(shù) （可以用自己的自定義 hooks組件）

4. 處理發(fā)送請(qǐng)求， 存儲(chǔ)數(shù)據(jù)，做好性能優(yōu)化? ?
   

react 新版本特性：

1. render 函數(shù)支持返回?cái)?shù)組和字符串

2. 錯(cuò)誤邊界，針對(duì)組件級(jí)別的錯(cuò)誤捕獲

3. 提升 SSR 渲染速度，支持流式渲染

4. 減少文件體積

5. 生命周期函數(shù)更新

   1. 由于異步渲染的改動(dòng)，有可能回導(dǎo)致 componentWillMount, componentWillReceiveProps, componentWillUpdate 三個(gè)生命周期函數(shù)執(zhí)行的時(shí)候會(huì)出現(xiàn)錯(cuò)誤，所以在新版本中拋棄了這3個(gè) 生命周期函數(shù)

6. createContext， 不必一層層傳遞，可以使用此方法指定生效范圍

7. createRef?

8. hooks ， 開(kāi)發(fā)方式大更新