React-Hooks之useState

今天是值得开心的事情，终于学到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);
    }

完结撒花✿✿ヽ(°▽°)ノ✿，开心复习专业课，练练口语准备睡觉觉