Hook 概述
- Hook 是 React
16.8的新增特性 - 它可以让函数式组件拥有类组件的特性
为什么需要 Hook
在 Hook 出现之前, 如果我们想在组件中保存自己的状态, 如果我们想在组件的某个生命周期中做一些事情, 那么我们必须使用类组件。
- 但是类组件的学习成本是比较高的, 你必须懂得 ES6 的 class, 你必须懂得箭头函数
- 但是在类组件的同一个生命周期方法中, 我们可能会编写很多不同的业务逻辑代码
- 这样就导致了大量不同的业务逻辑代码混杂到一个方法中, 导致代码变得很难以维护(诸如: 在组件被挂载的生命周期中, 可能需要注册监听, 可能需要发送网络请求等)
- 但是在类组件中共享数据是非常繁琐的, 需要借助
Context或者Redux等
所以当应用程序变得复杂时, 类组件就会变得非常复杂, 非常难以维护，所以 Hook 就是为了解决以上问题而生的。
使用 Hook
- Hook 的使用我们无需额外安装任何第三方库, 因为它就是 React 的一部分
- Hook 只能在函数组件中使用, 不能在类组件，或者函数组件之外的地方使用
- Hook 只能在函数最外层调用, 不要在循环、条件判断或者子函数中调用在这些地方是使用不了 Hook 的
官方文档地址：https://react.docschina.org/docs/hooks-intro.html
function Home() { // 只能在函数体的最外层使用 // 只能在这个地方使用Hook if () { // 不能使用Hook } while () { // 不能使用Hook } for () { // 不能使用Hook } switch () { // 不能使用Hook } function demo() { // 不能使用Hook } }
useState
Hook 概述
- Hook 就是一个特殊的函数
useState Hook 概述
- 可以让函数式组件保存自己状态的函数
使用 useState Hook
- Hook 只能在函数式组件中使用, 并且只能在函数体的最外层使用
有一个 useState 方法该方法接收一个参数：
- 参数：保存状态的初始值
返回值，是一个数组, 这个数组中有两个元素：
- 第一个元素: 保存的状态
- 第二个元素: 修改保存状态的方法
import React, {useState} from 'react'; export default function App() { const [state, setState] = useState(0); return ( <div> <p>{state}</p> <button onClick={() => { setState(state + 1) }}>增加 </button> <button onClick={() => { setState(state - 1) }}>减少 </button> </div> ) }
在同一个函数式组件中, 是可以多次使用同名的 Hook 的, 当然除了可以多次使用同名的 Hook 之外呢，还可以保存我们复杂的状态内容如下：
import React, {useState} from 'react'; export default function App() { const [ageState, setAgeState] = useState(18); const [nameState, setNameState] = useState('yangbuyiya'); const [studentState, setStudentState] = useState({name: 'zs', age: 23}); const [heroState, setHeroState] = useState([ {id: 1, name: '鲁班'}, {id: 2, name: '虞姬'}, {id: 3, name: '黄忠'}, ]); return ( <div> <p>{ageState}</p> <button onClick={() => { setAgeState(ageState + 1) }}>增加 </button> <button onClick={() => { setAgeState(ageState - 1) }}>减少 </button> <hr/> <p>{nameState}</p> <button onClick={() => { setNameState('Jonathan_Lee') }}>修改 </button> <hr/> <p>{studentState.name}</p> <p>{studentState.age}</p> <hr/> <ul>{ heroState.map((hero) => { return <li key={hero.id}>{hero.name}</li> }) }</ul> </div> ) }
useState 注意点
- 和类组件中的 setState 一样, 如果不记得可参考：https://www.cnblogs.com/yangbuyiya/articles/16157940.html 进行回顾
解决方案：
import React, {useState} from 'react'; export default function App() { const [ageState, setAgeState] = useState(18); const [nameState, setNameState] = useState('yangbuyiya'); const [studentState, setStudentState] = useState({name: 'zs', age: 23}); const [heroState, setHeroState] = useState([ {id: 1, name: '鲁班'}, {id: 2, name: '虞姬'}, {id: 3, name: '黄忠'}, ]); function incrementAge() { setAgeState((preAgeState) => preAgeState + 10); setAgeState((preAgeState) => preAgeState + 10); setAgeState((preAgeState) => preAgeState + 10); } function changeName() { setStudentState({...studentState, name: 'Jonathan_Lee'}); } return ( <div> <p>{ageState}</p> <button onClick={() => { incrementAge() }}>增加incrementAge </button> <button onClick={() => { setAgeState(ageState - 1) }}>减少 </button> <hr/> <p>{nameState}</p> <button onClick={() => { setNameState('Jonathan_Lee') }}>修改 </button> <hr/> <p>{studentState.name}</p> <p>{studentState.age}</p> <button onClick={() => { changeName() }}>修改changeName </button> <hr/> <ul>{ heroState.map((hero) => { return <li key={hero.id}>{hero.name}</li> }) }</ul> </div> ) }
然后如上代码还有一处就是修改引用类型的数据，博主编写的代码是将之前的引用对象拿到，然后在截取出来在重新设置需要更新的字段即可。
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
