React的Hooks

State Hook

• State Hook让函数组件也可以有state状态，并进行状态的读写操作
• 语法：const [xxx, setXxx] = React.useState(initValue)
• useState()说明
  • 参数：第一次初始化指定的值，并且会做缓存
  • 返回值：包含两个元素的数组，第一个为你内部当前状态值，第2个位更新这个状态的函数
• setXxx()的两种写法
  • setXxx(newVal)：参数为非函数子，直接指定新的状态值，内部用这个值覆盖原来的状态值
  • setXxx(value => newVal)：参数为函数，接收原本的状态值，返回新的状态值，内部用新的状态值覆盖原来的状态值

Effect Hook

• Effect Hook 可以让你在函数组件中执行副作用操作（用于模拟类组件的生命周期狗子）
• React中的副作用操作：
  • 发ajax请求数据获取
  • 设置订阅、启动定时器
  • 手动修改真实DOM
• 可以把Effect Hook看做如下三个函数的组合
  • componentDidMount()
  • componentDidUpdate()
  • componentWillUnmount()

Ref Hook

• Ref Hook 可以在函数组件中存储、查找组件内的标签或任意其他数据
• 语法：const refContainer = useRef()
• 作用：保存标签对象，功能和React.creatRef()一样

function Demo() {
    const [count, setCount] = React.useState(initValue)
    
    const myRef = useRef()
    
    React.useEffect(() => {
        console.log(1111111111)
        
        let timer = setInterval(() => {
            setCount(count+1)
        },500)
        
        // 这个返回值相当于卸载组件触发的函数，可以用于组件卸载前的执行操作
        return () => {
            clearInterval(timer)
        }
        
    // },[]) // 这个传一个空数组的话，就是谁也不检测，如果不传，就是谁都检测
    // }) 
    },[count]) 
    
    // 加的回调函数
    function add() {
        setCount(count+1) // 第一种写法
        setCount(count => count + 1) // 第二种写法
    }
    
    // show回调函数
    function show() {
        alert(myRef.current.value)
    }
    
    
    // 卸载组件的回调
    function unmount() {
        ReactDOM.unmountComponentsAtNode(doucment.getElementById('root'))
    }
    
    return (
        <div>
            <input ref={myRef} />
            <div>和为：{count}</div>
            <button onClick={add}>点我加1</button>
            <button onClick={unmount}>卸载组件</button>
            <button onClick={show}>点我显示提示数据</button>
        </div>
    )
}