今天是值得开心的事情，终于学到hooks啦，今天学了两个hook，只能说相见恨晚，感觉自己之前学context和redux都白学了，用起来还麻烦，呜呜
难怪之前一个友友疯狂推荐hooks,今天终于见证其简易性啦，爱了爱了
终于学到hooks啦，欢呼~.png
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);
}
完结撒花??ヽ(°▽°)ノ?，开心复习专业课，练练口语准备睡觉觉
