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

useEffect與useLayoutEffect 區(qū)別

作用

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

注意

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

使用

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

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

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

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

作用

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

注意

? ? 有dom操作的副作用 hooks

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

使用

? ? 跟 useEffect 使用一樣

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

? ? ｜ useEffect 相當于類組件 componentDidMount

? ? ｜ useLayoutEffect 相當于類組件 componentWillMount

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

useEffect 與 useLayoutEffect不同點：執(zhí)行時機

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

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

作用

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

注意

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

使用

? ? 1. 引用

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

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

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

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

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

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

作用

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

注意事項

? ? 初始化以及更新state

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

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

? ? 1. 引入

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

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

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

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

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

? ? ? ? </div>

? ? 完整代碼

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

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

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

export?default?StateFunction;

文件介紹

? ? 常用文件夾

? ? ? ? pages? ?→? 頁面

? ? ? ? components? ? →? 組件

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

? ? ? ? images? ?→? 圖片

? ? 移動文件夾

? ? ? ? App.js 移動到 pages中

? ? ? ? logo.svg 移動到images中

? ? ? ? 注意：webstorm移動文件可以自動改變路徑地址

通過腳手架搭建項目

? ? 如果沒安裝過 create-react-app 可以全局安裝

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

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

? ? ? ? ｜ 查看版本

? ? create-react-app react-hooks

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

? ? code . 打開編輯器

? ? npm start?

? ? ｜ 啟動項目，在webstorm 中可以Ctrl+Enter代替

三大框架對比

? ? Anguar

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

? ? ? ? 強大的、豐富的模板指令

? ? ? ? 模板能力非常強大

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

? ? ? ? 代碼自由度較低

? ? Vue

? ? ? ? 輕量，簡潔易用

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

? ? ? ? 模板能力較強

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

? ? ? ? 插件化

? ? React

? ? ? ? 自由度很高

? ? ? ? 一切都是JS

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

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

React新版本特性

? ? render 支持返回數(shù)組和字符串

? ? 錯誤邊界

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

? ? 減少文件體積

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

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

Hooks出現(xiàn)的意義

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

? ? 解決了組件樹不直觀、類組件難維護、邏輯不易復用的問題

為什么要學習Hooks

? ? 開發(fā)效率

? ? 提高組件復用性

? ? 提高邏輯復用性

? ? 提升性能

? ? 實現(xiàn)更復雜的功能

Hooks的使用場景

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

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

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

? ? 處理發(fā)送請求

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

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

1

2

useEffect，useLayoutEffect相同點，不同點

hooks

watching arguments and useeffect function render end

usestate用法

hooks應用場景

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

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

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

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

useReducer

useRef

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

- hooks 寫法的作用：

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

2. 提高組件的復用性

3. 提高邏輯復用性

4. 提升性能

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

- hooks 組件的使用場景：

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

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

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

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

react 新版本特性：

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

2. 錯誤邊界，針對組件級別的錯誤捕獲

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

4. 減少文件體積

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

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

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

7. createRef?

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