HOOK

HOOK组件：在函数静态组件的基础上，基于REACT提供的HOOKS函数，把其动态化

• useState在函数组件中使用状态
• useEffect:在函数组件中使用生命周期

import React, { useState, useEffect } from 'react';

// console.dir(React);
export default function TestHook(props) {
    let [num, changeNum] = useState(100),
        [count, changeCount] = useState(100);
    let [state, setState] = useState({
        num: 100,
        count: 100,
    });

使用周期函数

• useEffect(函数)：等价于DidMount&DidUpdate，在第一次渲染完和每一次重新渲染完都执行的
• useEffect(函数,[]):等价于DidMount

• useEffect(函数,[dependencies]):如果设置了依赖项，会在第一次渲染完以及依赖项改变后触发，依赖项可以设置多个，只要其中一个依赖改变就会触发...[state.num, state.count]

    useEffect(() => {
        console.log('OK');
        return () => {
            // 返回的函数会在组件销毁的时候触发，类似于WillUnmout
        };
    }, []);

    const handle = () => {
        // 和类组件中的内置的setState不一样，类组件中的setState可以允许修改部分状态信息；而我们自己拿到的setState每次更改，都是把整个状态都改成传递的值，所以每次修改的时候，先把之前的状态克隆一份，再去修改自己要修改的
        setState({
            ...state, //先克隆一份，保证状态不能丢
            num: state.num + 10,
        });
    };

// export default function TestHook(props) {
//     // useState([initial]):initial状态的初始值,返回结果是个数组[状态，修改状态的方法]
//     let [num, changeNum] = useState(100),
//         [count, changeCount] = useState(100);

//     console.log(num, changeNum);
//     // 普通方法
//     const handle = () => {
//         num += 10;
//         changeNum(num);
//         changeCount(count + 100);
//     };
//     return (
//         <div>
//             hook使用 <span>{num}</span>了!!往死打<span>{count}</span>
//             <br />
//             <button onClick={handle}>按钮</button>
//         </div>
//     );
// }