快来退出咱们吧!
“ 小和山的菜鸟们 ”,为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验,请您移至咱们官网小和山的菜鸟们 (https://xhs-rookies.com/) 进行学习,及时获取最新文章。
“Code tailor”,如果您对咱们文章感兴趣、或是想提一些倡议,微信关注 “小和山的菜鸟们” 公众号,与咱们取的分割,您也能够在微信上观看咱们的文章。每一个倡议或是同意都是对咱们极大的激励!
Hooks 小结
到此为止,咱们的 hooks
系列只剩下最初一个大案例了。当初咱们来对之前的内容做一个回顾。
咱们首先介绍了 hooks
什么是 hooks
hooks
是 React 16.8
新增的个性,它能够在不编写 类组件 的状况下应用 state
以及其余的 React
个性
为什么引入 hook
- 在组件之间复用状态逻辑很难
- 简单组件变得难以了解(生命周期内有不相干的逻辑
- 类组件中
this
指向问题不容易了解
介绍了 useState
useState()
用于为函数组件引入状态。纯函数不能有状态,所以应用钩子来引入状态。
创立和应用
const [count, setCount] = useState(defaultValue) // 假如 defaultValue 为 0
useState
返回的是一个数组,个别间接应用解构赋值取出两个值,state
以及 批改 state 的函数
。这两个值是须要成对获取的。
应用多个 useState
就能够定义多个 state
变量。
介绍了 useEffects
Effect Hook
能够让你在函数组件中执行副作用操作,换句话说能够实现一些相似 Class 中生命周期的性能。
创立和应用
useEffect(() => {// 执行一些副作用操作},[]);
useEffect
相当于 class
中三个生命周期的组合。在 class
中不同,每一个生命周期,都会有一些不相干的逻辑代码,useEffect
将这些代码进行了更好的拆分。
介绍了 useRefs
useRef
返回一个可变的 ref
对象,其 .current
属性被初始化为传入的参数(initialValue
)。返回的 ref
对象在组件的整个生命周期内放弃不变。
const refContainer = useRef(initialValue)
它返回的 ref
对象在组件的整个生命周期放弃不变,让咱们在函数组件中,也能够像 Class
组件一样保留一些实例属性,为咱们开发带来了许多可能性,除了这些离奇的性能,不要遗记 ref
开始获取 DOM
属性的性能,因为在 useRef
同样能够实用。
介绍了 useCallback
讲述了 hook 的规定
-
只能在最顶层应用
Hook
- 不要在循环,条件或嵌套函数中调用 Hook
-
只能在
React
函数中调用Hook
- 不要在一般的 JavaScript 函数中调用 Hook
介绍了自定义 hook
自定义 Hook 是一个函数,其名称以 “use
” 结尾,函数外部能够调用其余的 Hook
在文章中,咱们应用两个简略的案例,讲述了 自定义 hook 的创立和应用。
const useMyHook = (initValue) => {const [value, setValue] = useState(initValue || '')
return value
}
这就是咱们的简略创立,而应用形式与 useState
相似,只须要创立时取出值就能够进行应用。
function App() {const myHookValue = useMyHook('myHook')
return <div className="app">{myHookValue}</div>
}
下节预报
咱们在后续,还会有一个案例,对 hooks
系列文章中的所学内容进行尝试。应用了一个留言性能的案例。