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