這里記錄的主要針對用法 咱也不是什么大佬看看源碼文檔隨便就能用了 先學(xué)習怎么用 才好幫助理解實現(xiàn)原理 如果你對hook還沒有一個基本的概念 請先看看官方文檔
useState useRef
const App = (props) => {
const [value, setValue] = useState('')
const input = useRef(null)
const inputChange = ({ target: { value } }) => {
setValue(value)
input.current = value
}
const _click = () => {
setTimeout(() => {
console.log(value)
console.log(input.current)
}, 1000)
}
return (
<div>
<input value={state.value} onChange={inputChange} type="text"/>
<span>{state.show}</span>
<Button onClick={_click}>點擊</Button>
</div>
)
}
useState顧名思義是用來聲明和設(shè)置當前組件內(nèi)部的state變量的侣集。value是當前state里的變量名 而setValue則是修改他的方法
接收的參數(shù)為初始的默認值 例如可以是props.value由父數(shù)據(jù)流拿到的值
useRef原意是用來獲取dom節(jié)點 可以用input.current來訪問但我們也可以用他來解決一些作用域的問題
上述代碼console的結(jié)果 value里是點擊前入框的內(nèi)容飞蚓。而input.current里是打印時輸入框的內(nèi)容
useEffect 副作用
useEffect(() => {
const timer = setInterval(() => {}, 1000)
return () => clearInterval(timer)
}, [value])
useEffect 可以執(zhí)行一些副作用 替代了componentDidMount境钟、componentDidUpdate和componentWillUNmount
我們就不用再考慮某些變量在componentDidMount的時候是否可以拿到。如果可以就要去執(zhí)行一次update也要執(zhí)行 UnMount還要再清除這種繁瑣的操作了
return里執(zhí)行的是要清除訂閱或是計時器一類的做法類似于componentWillUNmount
第二個參數(shù)的數(shù)組所接受的變量 則代表會觸發(fā)執(zhí)行副作用的條件 如果發(fā)生改變才會觸發(fā)副作用
若沒有改變會直接跳過 如果傳遞[] 則只會在掛載和卸載時執(zhí)行一次
在寫法上useEffect副作用需要緊跟著上一個useState并且保證他在最外層 沒有循環(huán)沒有判斷
遵循官方的規(guī)則才能避免一些不必要的問題出現(xiàn)
useContext useReducer
組件之間數(shù)據(jù)共享 自己構(gòu)建一個數(shù)據(jù)流 做一個局部的store
useReducer
- 接收的第一個參數(shù)是一個回調(diào)函數(shù) 接收一個
state和action會用redux的童鞋應(yīng)該就知道咋用了 - 第二個參數(shù)是可選參數(shù) 為
state的默認值對象 - 而前面的
state和dispatch應(yīng)該更好理解了 暴露出來的store和用來突變的方法 - 當然 以上的應(yīng)該都建立在你已經(jīng)會使用
redux的情況下 如果你還不會 請先去了解一下redux
父組件
import React, { useReducer, useEffect } from 'react'
import './style.css'
const initialState = {
value: '',
show: '展示'
}
export const CountContext = React.createContext()
const handleStore = (state, action) => {
switch(action.type) {
case 'change':
return { ...state, value: action.value }
case 'set':
return { ...state, show: action.show }
default:
new Error()
}
}
// 父組件
const App = () => {
const [state, dispatch] = useReducer(handleStore, initialState)
const inputChange = ({ target: { value } }) => {
dispatch({ type: 'change', value })
}
return (
<CountContext.Provider value={{ state, dispatch }}>
<div className="content">
<input value={state.value} onChange={inputChange} type="text"/>
<span>{state.show}</span>
<Child/>
</div>
</CountContext.Provider>
)
}
我們可以把state也就是store通過CountContext.Provider的value讓數(shù)據(jù)流下去 包括dispatch方法
子組件
在子組件使用需要引入創(chuàng)建context的組件里的CountContext
import React, { useContext } from 'react'
import { CountContext } from '@/components/page'
const Child = () => {
const { state, dispatch } = useContext(CountContext)
const handleClick = () => {
let value = +state.value + 1
dispatch({ type: 'change', value })
}
return (
<div>
<div className='child' onClick={handleClick}>點擊</div>
<div>{state.value}</div>
</div>
)
}
這個時候我們已經(jīng)可以成功修改store的數(shù)據(jù)并使用他
和掘金同步
