-
useEffect與useLayoutEffect 區別
查看全部 -
作用
? ? 讓組件中的函數跟隨狀態更新
注意
? ? 優化函數組件中的功能函數
使用
? ? 第一個參數為函數
? ? 第二個參數為依賴列表
? ? 返回的是值，而非函數
const?getDoubleNum?=?useMemo(()=>{ ??console.log('獲取雙倍的num'); ??return?2*?num },?[num])查看全部 -
作用
? ? dom更新完成后執行某個操作
注意
? ? 有dom操作的副作用 hooks
? ? 在dom更新之后執行
使用
? ? 跟 useEffect 使用一樣
? ? useLayoutEffect 比 useEffect 先執行
? ? ｜ useEffect 相當于類組件 componentDidMount
? ? ｜ useLayoutEffect 相當于類組件 componentWillMount
? ? 參數1 為函數，參數2為依賴列表，可以返回一個函數
useEffect 與 useLayoutEffect不同點：執行時機
? ? useEffect 在 render之后執行
? ? useLayoutEffect 在 dom更新之后執行
查看全部 -
作用
? ? 給沒有生命周期的組件，添加結束渲染的信號
注意
? ? useEffect在render之后執行
使用
? ? 1. 引用
? ? ? ? import React, {useEffect} from 'react';
? ? 2. 調用，useEffect在每次組件結束渲染時調用
useEffect(()=>{ ??console.log('函數組件結束渲染'); ??return?()=>{ ????console.log('返回函數'); ??} },?[num])? ? ? ? 第一個參數接收一個函數
? ? ? ? 第二個參數接收依賴列表，只有依賴更新才會執行函數
? ? ? ? 返回一個函數，先執行返回函數，再執行參數函數
查看全部 -
作用
? ? 函數組件添加狀態
注意事項
? ? 初始化以及更新state
? ? 用來聲明狀態變量
使用useState來創建狀態
? ? 1. 引入
? ? ? ? import React, {useState} from 'react';
? ? 2. 接受一個參數作為初始值
? ? ? ? const [name, setName] = useState('函數')
? ? 3. 返回一個數組，第一個值為狀態，第二個為改變狀態的函數
? ? ? ? <div onClick={()=>{setName('小函數')}}>? 這是一個函數組件 - {name}
? ? ? ? </div>
? ? 完整代碼
import?React,?{useState}?from?'react'; //?使用useState來創建狀態 //?1.?引入 //?2.?接受一個參數作為初始值 //?3.?返回一個數組，第一個值為狀態，第二個為改變狀態的函數 function?StateFunction(){ ??const?[name,?setName]?=?useState('函數') ??return?( ????<div?onClick={()=>{setName('小函數')}}> ??????這是一個函數組件?-?{name} ????</div> ??) } export?default?StateFunction;查看全部 -
文件介紹
? ? 常用文件夾
? ? ? ? pages? ?→? 頁面
? ? ? ? components? ? →? 組件
? ? ? ? utils? →? 公共函數
? ? ? ? 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
? ? ｜ 創建一個名為react-hook的react項目
? ? code . 打開編輯器
? ? npm start?
? ? ｜ 啟動項目，在webstorm 中可以Ctrl+Enter代替
查看全部 -
三大框架對比
? ? Anguar
? ? ? ? ?雙向數據綁定
? ? ? ? 強大的、豐富的模板指令
? ? ? ? 模板能力非常強大
? ? ? ? 靜態路由
? ? ? ? 代碼自由度較低
? ? Vue
? ? ? ? 輕量，簡潔易用
? ? ? ? 雙向數據綁定
? ? ? ? 模板能力較強
? ? ? ? 動態路由
? ? ? ? 插件化
? ? React
? ? ? ? 自由度很高
? ? ? ? 一切都是JS
? ? ? ? 可以與三方類褲很好的配合
? ? ? ? 單向數據流
React新版本特性
? ? render 支持返回數組和字符串
? ? 錯誤邊界
? ? 提升SSR渲染速度，支持流式渲染（邊下載邊渲染）
? ? 減少文件體積
? ? createContext? 不必一層一層傳遞，此方法可以指定生效范圍
? ? hooks開發方式大更新
查看全部 -
Hooks出現的意義
? ? 讓函數有了狀態管理
? ? 解決了組件樹不直觀、類組件難維護、邏輯不易復用的問題
為什么要學習Hooks
? ? 開發效率
? ? 提高組件復用性
? ? 提高邏輯復用性
? ? 提升性能
? ? 實現更復雜的功能
Hooks的使用場景
? ? 利用Hooks取代生命周期函數
? ? 讓函數組件加上狀態
? ? 組件輔助函數
? ? 處理發送請求
? ? 存取數據
? ? 做好性能優化
查看全部 -
1
2
查看全部 -
useEffect，useLayoutEffect相同點，不同點
查看全部 -
hooks
查看全部 -
watching arguments and useeffect function render end
查看全部 -
usestate用法
查看全部 -
hooks應用場景
查看全部 -
useEffect如果不設置第二個參數，則每次重新渲染的時候，effect都會執行一遍，對于例如綁定DOM事件這種，只需要綁定一次的，性能開銷會很大。
可以通過設置第二個參數來優化性能，第二個參數接收依賴列表，即依賴列表中的數據有變化的時候，
才會執行effect，對于綁定DOM事件這種，不需要依賴任何數據變化的effect，第二個參數可以設置空數組以優化性能
useEffect鉤子的effect函數會返回一個限制性函數，總是先執行里面的限制性函數，才會繼續執行effect
查看全部 -
useReducer
查看全部 -
useRef使用方法查看全部
-
useRef
查看全部 -
useCallback查看全部
-
由于異步更新作用廢棄掉了componentWillMount（與函數組件中useLayoutEffect類似）
查看全部 -
useEffect和useLayoutEfffect不同點查看全部
-
useLayoutEffect查看全部
-
useEffect查看全部
-
- hooks 寫法的作用：
????高效開發
提高組件的復用性
提高邏輯復用性
提升性能
函數組件能提供比類組件更加細致的顆粒度，所以在實現某些細致的功能的時候更加方便
- hooks 組件的使用場景：
利用hooks 組件取代生命周期函數
讓函數組件加上狀態，這樣函數組件就有了自己的狀態，可以自己管理自己的狀態
組件輔助函數 （可以用自己的自定義 hooks組件）
處理發送請求， 存儲數據，做好性能優化? ?
查看全部 -
react 新版本特性：
render 函數支持返回數組和字符串
錯誤邊界，針對組件級別的錯誤捕獲
提升 SSR 渲染速度，支持流式渲染
減少文件體積
生命周期函數更新
由于異步渲染的改動，有可能回導致 componentWillMount, componentWillReceiveProps, componentWillUpdate 三個生命周期函數執行的時候會出現錯誤，所以在新版本中拋棄了這3個 生命周期函數
createContext， 不必一層層傳遞，可以使用此方法指定生效范圍
createRef?
hooks ， 開發方式大更新
查看全部
舉報
