hooks零碎笔记

hooks是react的新特性，主要目的是不再用class类组件写，而是用函数式组件。没有生命周期

- useState:  （方法）
    + 多状态的情况下使用useState，useState是不能存在条件判断语句中，必须按照顺序
    + const [count, setCount] = useState(0);  // es6的新特性 数组解构
            [变量 , 改变值得方法]
    + 通过useState的顺序来记录

        + 引入
        + 声明 要控制的状态
        + 右边初始化状态
        + 左边是数组解构



- useEfect: (方法)     ===> 类组件：生命周期函数   
    + 主要运用在监听、请求数据、手动修改dom时，在生命周期函数中执行。（副作用）
    + 相当于两个生命周期函数：componentDidMount()  组件挂载完成后
                            componentDidUpdate()  组件更新完成后
    + 是异步，不影响组件更新

    + 用useState销毁组件，解绑
    
        + 引入
        + 声明


- useContext: (方法)   ===> props
    + 解决父子组件传值


- useReducer: (方法)   ===> redux
    + 解决状态共享

    +增强了js里reducer

    + Reducer: 
        function countReducer(state,action){
            switch(action.type){
                case 'add':
                    return state + 1
                case 'sub':
                    return state - 1
                default:
                    return state
            }
        }

    + useReducer:

import React, { useState, useEffect } from 'react';
import './index.less'

function Index() {
    //这样的方式并不能让组件解绑，在每一次数据更新后，还会执行，产生了副作用
    // useEffect(() => {
    //     // console.log('useEffect=> 老弟，你来了！Index页面')
    //     return () => {
    //         console.log('老弟，你走了！Index页面')
    //     }
    // })    

    // useEffect(() => {
    //     console.log('useEffect=> 老弟，你来了！Index页面')
    //     return () => {
    //         console.log('老弟，你来了！Index页面')
    //     }
    // })
    return <p>Index页面</p>
}


function PackageSort() {
    const [count, setCount] = useState(0);
    // let _useState = useState(0)
    // let count = _useState[0]
    // let setCount = _useState[1]

    useEffect(() => {
        // 匿名函数（副作用）
        // console.log(`useEffect => You clicked ${count} times`)
        return () => {
            // console.log('useEffect=> 老弟，你来了！')
        }
        // }, [count])  // 表示每当count变量更新的时候,执行Effect
    }, [])   // 表示只有当Index组件被解绑销毁时才执行Effect



    // 返回jsx语法
    return <div className="content-wrap packageSort-category">
        <div className="tree-wrap leftDepart">
            <p>{count}</p>
            <button onClick={() => { setCount(count + 1) }}>点击</button>
        </div>
        <div className="rightDepart">
            <Index></Index>
        </div>
    </div>
}

export default PackageSort

// 利用useReducer、useContext、Redux实现数据的共享

// useContext :可以用来访问全局状态，而避免一层层的传递组件之间   ====> 实现了状态全局化，并能统一管理，实现了redux的一部分

// useReducer  action|state  通过action可以更新复杂逻辑状态，主要可以实现redux中reducer部分

// Reducer的实现   特点： 传进两个值，state,action 
// function countReducer(state, action) {
//     switch (action.type) {
//         case 'add':
//             return state+ 1
//         case 'sub':
//             return state - 1
//         default:
//             return state
//     }
// }



// useReducer的实现
import React, { useReducer } from 'react'

function ReducerDemo() {
    // 声明：通过useReducer返回数组[]   ========================>即数据传到reduce中处理一遍，返回新的数据，==> count         
    // useReducer需传入两个参数：第一个函数，第二个初始值
    // const [] = useReducer(() => { }, 0)
    const [count, dispatch] = useReducer((state, action) => {
        switch (action) {
            case 'add':
                return state + 1
            case 'sub':
                return state - 1
            default:
                return state
        }
    }, 0)

    // 使用useReducer，引入jsx界面
    return (
        <div>
            <h1>现在的分数是{count}加工过的值</h1>
            <button onClick={() => { dispatch('add') }}>Increment</button>
            <button onClick={() => { dispatch('sub') }}>Decrement</button>
        </div>
    )
}

export default ReducerDemo