React学习20220313 Hook

理解Hook

按我的理解，Hook是对繁琐，学习曲线长，难以更改中间步骤的类的拆分，使得函数可以拥有一些类能够使用的功能：如state和生命周期等，而且Hook所辅助的函数式编程比较符合React所推崇的组件化编程。

对useState的理解

充当函数中的state，但一次只有一个，不像类中一次指定多个

[text,setText] =useState(‘初始文字’)

useState返回一个数组，数组第一个是想要的state变量，第二个是修改变量的Api

对useEffect的理解

弥补生命周期

接收两个参数：回调函数和依赖数组

useEffect(callBack,[])

调用规则：

每次渲染后：传入回调函数，不传依赖数组：

• useEffect(callBack)

挂载阶段执行一次后不再执行：传入回调函数，且此函数的返回值不是函数，同时传入空数组。

• useEffect(()=>{/*业务逻辑*/},[])

仅在挂载和卸载阶段执行的：传入回调函数，且此函数的返回值是一个函数

useEffect(()=>{
//业务逻辑
//返回一个函数记为B
return ()=>{
}
},[])

每次渲染都触发，且卸载阶段也会被触发的：传入回调函数，且这个函数的返回值是一个函数，同时不传第二个参数

useEffect(()=>{
    //A的业务逻辑
    
    //返回一个函数记为B
    return ()=>{
        
    }
})

上面这段代码在每次渲染都触发A逻辑，并在卸载阶段触发B逻辑

按我的理解，在前面一半写个函数会在渲染阶段一直触发，单纯写一段逻辑就会在挂载阶段触发，在return那写个函数就会在卸载的时候触发

不要在循环，条件或嵌套函数中调用Hook

首次渲染过程

hook相关的所有信息收敛在一个hook对象粒，而hook对象之间以单向链表的形式相互串联，

更新过程

因此，hooks的渲染是通过“依次遍历”（也就是说，它只会管这回需要前进几个next，而不会对对应位置的真实性进行判断）来定位每个hooks的内容的，如果前后两次读到的链表顺序出现差异，那么渲染的结果自然是不可控的。