Hooks-useEffect

2021-09-05 221 阅读1分钟
/**useEffect(()=>{return callback;},[参数])
 * 回调函数：在组件销毁时执行
 * 第二个参数：是一个数组，不传值时默认每次都更新。
 *            传值时，表示数组每一项都不变时，才会阻止每次执行
 *             只是作浅层比较，如果是内部属性，会导致失误
 * 副作用：绑定事件，网络请求，访问DOM
 * 副作用时机：useEffect含概componentDidMount(Mount之后),componentDidUpdate(Update后),componentWillUnmount(Unmount前)
 * 
 * 使用useEffect()时，有一点需要注意。如果有多个副效应，应该调用多个useEffect()，而不应该合并写在一起。
 */
import React,{useState,useEffect} from 'react';
export default  function App(){  
    const [count,setCount] = useState(0);
    useEffect(()=>{
        window.addEventListener('resize',handleResize);
        return () => window.removeEventListener('resize',handleResize);
    },[count])//看这一行！！！ useEffect有第二个数组参数！！！而不是[]，否则更新有问题
    const handleResize = () =>{
        console.log(`count is ${count}`)
    }
    return(
        <div className="app">
            <button onClick={()=>setCount(count + 1)}>+</button>
            <h1>{count}</h1>
        </div>
    )
}