react 函数组件 hooks api

useState

这里用到了解构赋值

const [n,setN] = useState(0)
//useState返回一个数组，第一个是`读`，第二个是`写`，n的初始值是0

useEffect

• 模拟componentDIdMount

useEffect(()=>{
  console.log('第一次渲染')
},[])

• 模拟componentDidUpdate

const [n,setN] = useState(0)
useEffect(()=>{
  console.log('n变了')
},[n])
//如果不传数组的话，则包含了所有的state，任意一个变了都会执行

• 模拟componentWillUnmount

useEffect(()=>{
  console.log('第一次渲染')
  return ()=>{
    console.log('组件要死了')
  }
})
//return 一个函数，这个函数在组件销毁前会执行一次

• 自定义hooks：必须以use开头
  示例：自定义 hooks 实现第一次变化不执行，第二次以后才执行

const useUpdate = (fn, dep) => {
        const [count, setCount] = useState(0)
        useEffect(() => {
            setCount(x => x + 1)  //不这么写会有警告
        }, [dep])
        useEffect(() => {
            if (count > 1)
                fn()
        }, [count,fn])  //两个都是依赖，少一个会有警告
    }

    useUpdate(() => {
        console.log('n变了');
    }, n)