react hook 學習隨記

這裏記錄的主要針對用法 咱也不是什麼大佬看看源碼文檔隨便就能用了 先學習怎麼用 纔好幫助理解實現原理 若是你對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顧名思義是用來聲明和設置當前組件內部的state變量的。value是當前state裏的變量名 而setValue則是修改他的方法

接收的參數爲初始的默認值 例如能夠是props.value由父數據流拿到的值

useRef原意是用來獲取dom節點 能夠用input.current來訪問但咱們也能夠用他來解決一些做用域的問題 上述代碼console的結果 value裏是點擊前入框的內容。而input.current裏是打印時輸入框的內容

useEffect 反作用

useEffect(() => {
    const timer = setInterval(() => {}, 1000)
    return () => clearInterval(timer)
}, [value])
複製代碼

useEffect 能夠執行一些反作用 替代了componentDidMount、componentDidUpdate和componentWillUNmount

咱們就不用再考慮某些變量在componentDidMount的時候是否能夠拿到。若是能夠就要去執行一次update也要執行 UnMount還要再清除這種繁瑣的操做了

return裏執行的是要清除訂閱或是計時器一類的作法相似於componentWillUNmount

第二個參數的數組所接受的變量 則表明會觸發執行反作用的條件 若是發生改變纔會觸發反作用

若沒有改變會直接跳過 若是傳遞[] 則只會在掛載和卸載時執行一次

在寫法上useEffect反作用須要緊跟着上一個useState而且保證他在最外層 沒有循環沒有判斷 遵循官方的規則才能避免一些沒必要要的問題出現

useContext useReducer

組件之間數據共享 本身構建一個數據流 作一個局部的store

useReducer

• 接收的第一個參數是一個回調函數 接收一個state和action 會用redux的童鞋應該就知道咋用了
• 第二個參數是可選參數 爲state的默認值對象
• 而前面的state和dispatch 應該更好理解了 暴露出來的store和用來突變的方法
• 固然 以上的應該都創建在你已經會使用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讓數據流下去 包括dispatch方法

子組件

在子組件使用須要引入建立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>
        
      )
    }
複製代碼

這個時候咱們已經能夠成功修改store的數據並使用

最近常常打不開掘金 同步至簡書