學習總結!
從三個維度學習記錄:
- 為什麼️
- 怎麼用
- 知識點⛽️
useState
為什麼要使用useState?
useState 的出現是 : 在函數組件裡面使用 class的setState,刺激!
解決了的問題是:當我們一個函數組件想要有自己維護的state的時候,不得已只能轉換成class。這樣很麻煩!
如何使用useState?
<code>const [name, setName] = useState('rose')
複製代碼/<code>
useState踩坑知識點
1. 重點: useState的初始值,只在第一次有效
我當時反正沒有當回事,直到遇到了坑...
2. 舉個例子:
當我點擊按鈕修改name的值的時候,我發現在Child組件, 是收到了,但是並沒有通過useState賦值給name!
結論: 實踐檢驗知識點!
<code>const Child = memo(({data}) =>{
console.log('child render...', data)
const [name, setName] = useState(data)
return (
child
{name} --- {data}
);
})
const Hook =()=>{
console.log('Hook render...')
const [count, setCount] = useState(0)
const [name, setName] = useState('rose')
return(
{count}
<button>setCount(count+1)}>update count /<button>
<button>setName('jack')}>update name /<button>
<child>
/<child>
)
}
複製代碼/<code>
useEffect
為什麼要使用useEffect?
useEffect 的出現是 : 在函數組件裡面使用 class的生命週期函數,還是所有函數的合體!刺激!
如何使用useEffect?
<code>useEffect(()=>{
...
})
複製代碼/<code>
useEffect知識點合集
1.只在第一次使用的componentDidMount,可以用來請求異步數據...、
useEffect最後,加了[]就表示只第一次執行
<code>useEffect(()=>{
const users = 獲取全國人民的信息()
},[])
複製代碼/<code>
2.用來替代willUpdate等每次渲染都會執行的生命函數
useEffect最後,不加[]就表示每一次渲染都執行
<code>useEffect(()=>{
const users = 每次都獲取全國人民的信息()
})
複製代碼/<code>
3.每次渲染都執行感覺有點費,所以:
useEffect最後,加[],並且[]裡面加的字段就表示,這個字段更改了,我這個effect才執行
<code>useEffect(() => {
const users = (name改變了我才獲取全國人民的信息())
},[name])
複製代碼/<code>
4.如果我想要分別name和age呢:
可以寫多個useEffect
<code>useEffect(() => {
const users = (name改變了我才獲取全國人民的name信息())
},[name])
useEffect(() => {
const users = (name改變了我才獲取全國人民的age信息())
},[age])
複製代碼/<code>
5.如果我們之前訂閱了什麼,最後在willUnMount這個生命週期裡面要取消訂閱,這可咋用useEffect實現啊:
在effect的return裡面可以做取消訂閱的事
<code>useEffect(() => {
const subscription = 訂閱全國人民吃飯的情報!
return () => {
取消訂閱全國人民吃飯的情報!
}
},[])
複製代碼/<code>
為什麼要取消訂閱?
大家都知道,render了之後會執行重新useEffect,如果useEffect裡面有一個每setInterval...那麼每次render了,再次執行useEffect就會再創建一個setInterval,然後就混亂了...可以把下面案例return的內容刪掉感受下
<code>useEffect(() => {
console.log('use effect...',count)
const timer = setInterval(() => setCount(count +1), 1000)
return ()=> clearInterval(timer)
})
複製代碼/<code>
6.useEffect的一些暗戳戳的規則:
1.useEffect 裡面使用到的state的值, 固定在了useEffect內部, 不會被改變,除非useEffect刷新,重新固定state的值
<code> const [count, setCount] = useState(0)
useEffect(() => {
console.log('use effect...',count)
const timer = setInterval(() => {
console.log('timer...count:', count)
setCount(count + 1)
}, 1000)
return ()=> clearInterval(timer)
},[])
複製代碼/<code>
2.useEffect不能被判斷包裹
<code>const [count, setCount] = useState(0)
if(2 < 5){
useEffect(() => {
console.log('use effect...',count)
const timer = setInterval(() => setCount(count +1), 1000)
return ()=> clearInterval(timer)
})
}
複製代碼/<code>
3.useEffect不能被打斷
<code>const [count, setCount] = useState(0)
useEffect(...)
return // 函數提前結束了
useEffect(...)
}
複製代碼/<code>
具體原因跟到useEffect的生成執行規則有關係:看文檔去!
useRef
為什麼要使用useRef?
前面提到的:
useEffect 裡面使用到的state的值, 固定在了useEffect內部, 不會被改變,除非useEffect刷新,重新固定state的值
<code> const [count, setCount] = useState(0)
useEffect(() => {
console.log('use effect...',count)
const timer = setInterval(() => {
console.log('timer...count:', count)
setCount(count + 1)
}, 1000)
return ()=> clearInterval(timer)
},[])
複製代碼/<code>
useEffect裡面的state的值,是固定的,這個是有辦法解決的,就是用useRef,可以理解成useRef的一個作用:
就是相當於全局作用域,一處被修改,其他地方全更新...
如何使用useRef?
<code>const countRef = useRef(0)
複製代碼/<code>
useRef知識點合集
1. 就是相當於全局作用域,一處被修改,其他地方全更新...
<code> const [count, setCount] = useState(0)
const countRef = useRef(0)
useEffect(() => {
console.log('use effect...',count)
const timer = setInterval(() => {
console.log('timer...count:', countRef.current)
setCount(countRef.current + 1)
}, 1000)
return ()=> clearInterval(timer)
},[])
複製代碼/<code>
2. 普遍操作,用來操作dom
const btnRef = useRef(null)
click me
活學活用,記得取消綁定事件哦! return ()=> btnRef.current.removeEventListener('click',onClick, false)
<code>const Hook =()=>{
const [count, setCount] = useState(0)
const btnRef = useRef(null)
useEffect(() => {
console.log('use effect...')
const onClick = ()=>{
setCount(count+1)
}
btnRef.current.addEventListener('click',onClick, false)
return ()=> btnRef.current.removeEventListener('click',onClick, false)
},[count])
return(
{count}
<button>click me /<button>
)
}
複製代碼/<code>
useMemo
為什麼要使用useMemo?
舉個:
<code>const Child = memo(({data}) =>{
console.log('child render...', data.name)
return (
child
{data.name}
);
})
const Hook =()=>{
console.log('Hook render...')
const [count, setCount] = useState(0)
const [name, setName] = useState('rose')
const data = {
name
}
return(
{count}
<button>setCount(count+1)}>update count /<button>
<child>
/<child>
)
}
複製代碼/<code>
當我們點擊按鈕更新count的時候,Effect組件會render,一旦render, 執行到這一行代碼:
<code> const data = {
name
}
複製代碼/<code>
這一行代碼會生成有新的內存地址的對象,那麼就算帶著memo的Child組件,也會跟著重新render, 儘管最後其實Child使用到的值沒有改變!
這樣就多餘render了,感覺性能浪費了!於是useMemo 作為一個有著暫存能力的,就來了。
如何使用useMemo?
<code> const data = useMemo(()=>{
return {
name
}
},[name])
複製代碼/<code>
的時候,就會先根據[name]裡面的name值判斷一下,因為useMemo 作為一個有著暫存能力的,暫存了上一次的name結果。
結果一對比上一次的name,我們發現name值居然沒有改變!那麼這次data就不重新賦值成新的對象了!
沒有新的對象,就沒有新的內存地址,那麼Child就不會重新render!
<code>const Child = memo(({data}) =>{
console.log('child render...', data.name)
return (
child
{data.name}
);
})
const Hook =()=>{
console.log('Hook render...')
const [count, setCount] = useState(0)
const [name, setName] = useState('rose')
const data = useMemo(()=>{
return {
name
}
},[name])
return(
{count}
<button>setCount(count+1)}>update count /<button>
<child>
/<child>
)
}
複製代碼/<code>
useMemo知識點合集
useMemo 一看 就感覺跟到memo有種蜜汁關係,因為都有memo...
1. 首先,memo 的用法是:函數組件裡面的PureComponent
但是,如果函數組件被 React.memo 包裹,且其實現中擁有 useState 或 useContext 的 Hook,當 context 發生變化時,它仍會重新渲染。
2. 而且,memo是淺比較,意思是,對象只比較內存地址,只要你內存地址沒變,管你對象裡面的值千變萬化都不會觸發render
3. 最後,useMemo 的作用是, 於是useMemo 作為一個有著暫存能力的,就來了:
useCallback
為什麼要使用useCallback?
useMemo 解決了值的緩存的問題,那麼函數呢?
下面這個就是,當點擊count的按鈕,Effect組件render,遇到了:
<code> const onChange=(e)=>{
setText(e.target.value())
}
複製代碼/<code>
則,重新生成了一個onChange函數,賦值給了Child組件,淺比較失敗,Child組件成功重新render,儘管Child組件什麼都沒有做!
<code>const Child = memo(({data, onChange}) =>{
console.log('child render...')
return (
child
{data}
);
})
const Hook =()=>{
console.log('Hook render...')
const [count, setCount] = useState(0)
const [name, setName] = useState('rose')
const [text, setText] = useState('')
const onChange=(e)=>{
setText(e.target.value())
}
return(
count: {count}
text : {text}
<button>setCount(count + 1)}>count + 1/<button>
<child>
/<child>
)
}
複製代碼/<code>
如何使用useCallback?
<code> const onChange = useCallback((e)=>{
setText(e.target.value())
},[])
複製代碼/<code>
useCallback 知識點合集
1.useMemo 與 useCallback 類似,都是有著緩存的作用。本質的區別可能就是:
useMemo 是緩存值的
useCallback 是緩存函數的
2.沒有依賴,添加空的依賴,就是空數組!
useReducer
為什麼要使用useReducer?
顧名思義,useReducer就是 class 裡面那個reducer
如何使用useReducer?
舉個:
<code>const reducer =(state = 0, {type})=>{
switch (type) {
case "add":
return state+1
case 'delete':
return state-1
default:
return state;
}
}
const Hook =()=>{
const [count, dispatch] = useReducer(reducer, 0)
return(
count:{count}
<button> dispatch({type:'add'})}>add/<button>
<button> dispatch({type:'delete'})}>delete/<button>
)
}
export default Hook
複製代碼/<code>
useReducer知識點合集
暫無特別的...
useContext
為什麼要使用useContext?
useContext 就是 class 裡面的 那個 context。
如何使用useContext?
<code>import React, {useContext, useReducer} from 'react'
const reducer = (state = 0, {type}) => {
switch (type) {
case "add":
return state + 1
case 'delete':
return state - 1
default:
return state;
}
}
const Context = React.createContext(null);
const Child = () => {
const [count, dispatch] = useContext(Context)
return (
child...{count}
<button> dispatch({type: 'add'})}>child add/<button>
<button> dispatch({type: 'delete'})}>child delete/<button>
)
}
const Hook = () => {
const [count, dispatch] = useReducer(reducer, 10)
return (
<context.provider>
mom ... {count}
<child>
<button> dispatch({type: 'add'})}>mom add/<button>
<button> dispatch({type: 'delete'})}>mom delete/<button>
/<context.provider>
)
}
export default Hook
複製代碼/<code>
useContext知識點合集
暫無特別的...
自定義hook!
自定義一個當resize 的時候 監聽window的width和height的hook
<code>import {useEffect, useState} from "react";
export const useWindowSize = () => {
const [width, setWidth] = useState()
const [height, setHeight] = useState()
useEffect(() => {
const {clientWidth, clientHeight} = document.documentElement
setWidth(clientWidth)
setHeight(clientHeight)
}, [])
useEffect(() => {
const handleWindowSize = () =>{
const {clientWidth, clientHeight} = document.documentElement
setWidth(clientWidth)
setHeight(clientHeight)
};
window.addEventListener('resize', handleWindowSize, false)
return () => {
window.removeEventListener('resize',handleWindowSize, false)
}
})
return [width, height]
}
複製代碼/<code>
如何使用:
<code>const [width, height] = useWindowSize()
複製代碼/<code>
最後
閱讀更多 Echa攻城獅 的文章