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