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的数据并使用

最近常常打不开掘金 同步至简书