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)
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容