react hook 学习随记

2019-07-31 本文已影响0人求求你不要再折磨我

这里记录的主要针对用法咱也不是什么大佬看看源码文档随便就能用了先学习怎么用才好帮助理解实现原理如果你对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的数据并使用他

和掘金同步

react hook 学习随记

猜你喜欢

热点阅读