今天是值得开心的事情，终于学到hooks啦，今天学了两个hook，只能说相见恨晚，感觉自己之前学context和redux都白学了，用起来还麻烦，呜呜
难怪之前一个友友疯狂推荐hooks,今天终于见证其简易性啦，爱了爱了
1.什么是Hook?
- Hook 是 React
16.8的新增特性，它可以让函数式组件拥有类组件特性
2.为什么需要Hook?
- 在Hook出现之前, 如果我们想在组件中保存自己的
状态,如果我们想在组件的某个生命周期中做一些事情, 那么我们必须使用类组件
- 但是类组件的学习成本是比较高的, 你必须懂得ES6的class, 你必须懂得箭头函数
- 但是在类组件的同一个生命周期方法中, 我们可能会编写很多不同的业务逻辑代码;这样就导致了大量不同的业务逻辑代码混杂到一个方法中, 导致代码变得很难以维护
诸如：在组件被挂载的生命周期中, 可能主要注册监听, 可能需要发送网络请求等 - 但是在类组件中共享数据是非常繁琐的, 需要借助
Context或者Redux等
- 所以当应用程序变得复杂时, 类组件就会变得非常复杂, 非常难以维护
所以Hook就是为了解决以上问题而生的
3.如何使用Hook?
- Hook的使用我们无需额外安装任何第三方库, 因为它就是React的一部分
- Hook只能在函数组件中使用, 不能在类组件，或者函数组件之外的地方使用
- Hook只能在函数最外层调用, 不要在循环、条件判断或者子函数中调用
官方文档地址: https://react.docschina.org/docs/hooks-intro.html
function Home() { // 只能在函数体的最外层使用 // 只能在这个地方使用Hook if(){ // 不能使用Hook } while (){ // 不能使用Hook } for(){ // 不能使用Hook } switch () { // 不能使用Hook } function demo() { // 不能使用Hook } }
hooks01 - useState
1.什么是Hook?
Hook就是一个特殊的函数
2.什么是useState Hook?
可以让函数式组件保存自己状态的函数
3.useState Hook如何使用?
Hook只能在函数式组件中使用, 并且只能在函数体的最外层使用
useState:
参数: 保证状态的初始值
返回值: 是一个数组, 这个数组中有两个元素
第一个元素: 保存的状态
第二个元素: 修改保存状态的方法
import React, {useState} from 'react'; function App() { const [nameState, setNameState] = useState("小单小单小单在这里呀") const [ageState, setAgeState] = useState(18); const [studentState, setStudentState] = useState({name:'zs', age:23}); const [heroState, setHeroState] = useState([ {id: 1, name:'鲁班'}, {id: 1, name:'虞姬'}, {id: 1, 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('it666')}}>修改</button> <hr/> <p>{studentState.name}</p> <p>{studentState.age}</p> <hr/> <ul>{ heroState.map((hero)=>{ return <li>{hero.name}</li> }) }</ul> </div> ) } export default App;
useState 注意点：和类组件中的setState一样，是异步调用，因此在某些情况下连续调用会产生“合并现象”
解决办法和state一样，修改保存状态的方法能够接收上次返回的数据，那么可以在这个基础上进行操纵即相当于同步操作，此时可以避免合并现象
function incrementAge() { // setAgeState(ageState + 10); // setAgeState(ageState + 10); // setAgeState(ageState + 10); //会发生合并现象 setAgeState((preAgeState)=>preAgeState + 10); setAgeState((preAgeState)=>preAgeState + 10); setAgeState((preAgeState)=>preAgeState + 10); }
完结撒花✿✿ヽ(°▽°)ノ✿，开心复习专业课，练练口语准备睡觉觉
