-
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)景
查看全部 -
useEffect如果不設(shè)置第二個(gè)參數(shù),則每次重新渲染的時(shí)候,effect都會(huì)執(zhí)行一遍,對(duì)于例如綁定DOM事件這種,只需要綁定一次的,性能開(kāi)銷會(huì)很大。
可以通過(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)化性能
useEffect鉤子的effect函數(shù)會(huì)返回一個(gè)限制性函數(shù),總是先執(zhí)行里面的限制性函數(shù),才會(huì)繼續(xù)執(zhí)行effect
查看全部 -
useReducer
查看全部 -
useRef使用方法查看全部
-
useRef
查看全部 -
useCallback查看全部
-
由于異步更新作用廢棄掉了componentWillMount(與函數(shù)組件中useLayoutEffect類似)
查看全部 -
useEffect和useLayoutEfffect不同點(diǎn)查看全部
-
useLayoutEffect查看全部
-
useEffect查看全部
-
- hooks 寫法的作用:
????高效開(kāi)發(fā)
提高組件的復(fù)用性
提高邏輯復(fù)用性
提升性能
函數(shù)組件能提供比類組件更加細(xì)致的顆粒度,所以在實(shí)現(xiàn)某些細(xì)致的功能的時(shí)候更加方便
- hooks 組件的使用場(chǎng)景:
利用hooks 組件取代生命周期函數(shù)
讓函數(shù)組件加上狀態(tài),這樣函數(shù)組件就有了自己的狀態(tài),可以自己管理自己的狀態(tài)
組件輔助函數(shù) (可以用自己的自定義 hooks組件)
處理發(fā)送請(qǐng)求, 存儲(chǔ)數(shù)據(jù),做好性能優(yōu)化? ?
查看全部 -
react 新版本特性:
render 函數(shù)支持返回?cái)?shù)組和字符串
錯(cuò)誤邊界,針對(duì)組件級(jí)別的錯(cuò)誤捕獲
提升 SSR 渲染速度,支持流式渲染
減少文件體積
生命周期函數(shù)更新
由于異步渲染的改動(dòng),有可能回導(dǎo)致 componentWillMount, componentWillReceiveProps, componentWillUpdate 三個(gè)生命周期函數(shù)執(zhí)行的時(shí)候會(huì)出現(xiàn)錯(cuò)誤,所以在新版本中拋棄了這3個(gè) 生命周期函數(shù)
createContext, 不必一層層傳遞,可以使用此方法指定生效范圍
createRef?
hooks , 開(kāi)發(fā)方式大更新
查看全部
舉報(bào)