hook并不能覆盖所有class所有使用场景
1 .getSnapshotBeforeUpdate,getDervedStateFromError,componentDidCatch这几个生命周期还没有对应的学法
2 .如果组件必须要需要这几个生命周期函数，可以使用class形式
从Class迁徙到Hook
1 .constructor:函数组件不需要构造函数，你可以通过调用useState来初始化state.
2 .getDerivedStateFromProps
1 .改成在渲染时安排一次更新
3 .shouldComponentUpdate:
1 .memo
4 .render:这是函数本身组件
5 .componentDidMount,componentDidUpdate,compoenntWillUnmount:
1 .useEffect hook
6 .getSnapshotBeforeUpdate,componentDidiCatch，getDerivedStateFromError
1 .目前没有对应的hook写法，需要下一个版本
进行数据获取
实例变量
1 .useRef 类似一个class的实例属性。ref对象的current属性可以变化，而且可以容纳任意值的通用容器
function Timer() {
const intervalRef = useRef();
useEffect(() => {
const id = setInterval(() => {
// ...
});
intervalRef.current = id;
return () => {
clearInterval(intervalRef.current);
};
});
function handleCancelClick() {
clearInterval(intervalRef.current);
}
//可以在别的函数里面手动关闭
}
单个还是多个state变量
1 .把state切分成多个state变量，每个变量包含的不同值
获取上一轮的props或者state
看到的是旧的state值
1 .在先点击handleAlertClick 这个函数，这个等待执行的时候，再次改变state的值，此时如果有依赖的话，是不会显示最新的值，而是直接使用原来的
2 .组件内部的任何函数，包括时间处理函数和effect，都是被从他们创建的那次渲染中被绑定数据的
3 .如果想要从异步回调中读取最新的值，可以创建一个ref来保存值，并读取他
import React,{useState} from 'react'
function Example(){
const [count,setCount]=useState(0)
function handleAlertClick(){
setTimeout(()=>{
console.log('count',count)
},3000)
}
// 第一次渲染这个函数的时候其实已经计算好了，这里会显示0
return (
<div>
<p>you click {count}times</p>
<button onClick={()=>setCount(count+1)}> click me</button>
<button onClick={handleAlertClick}>Show comsole</button>
</div>
)
}export default Example
//变成ref就能获取到最新的值，即使在获取的阶段进行更新
import React,{useState,useRef} from 'react'
function Example(){
const [count,setCount]=useState(0)
const ref=useRef(0)
ref.current=0
function handleAlertClick(){
setTimeout(()=>{
console.log('count',ref.current)
},3000)
}
// 第一次渲染这个函数的时候其实已经计算好了，这里会显示0
return (
<div>
<p>you click {count}times</p>
<button onClick={()=>ref.current=10}> click me</button>
<button onClick={handleAlertClick}>Show comsole</button>
</div>
)
}export default Example
Class 组件和function组件的渲染效率
1 .函数组件每次渲染创建大量的闭包，传统的class组件的render非常简洁
2 .在现代浏览器中，只有特别极端的场景下才会有明显的差别
3 .hook避免了class需要的额外开销，比如创建类实例以及构造函数中绑定事件处理器的成本
4 .符合语言习惯的代码在使用hook时不需要很深的组件嵌套。
5 .同样的功能，类组件和函数组件的效率是不相上下的，但是函数组件是未来趋势
6 .
引用类型的数据不能感知到变化
function useTest(){
const [Arr,setArr]=useState([])
const [count,setCount]=useState(0)
useEffect(()=>{
function handleClick(){
console.log('click')
const data=new Date()
const arr=Arr
arr.push(data)
setArr(arr)
setCount(count+1)
console.log(arr)
}
document.addEventListener("click",handleClick)
},[])
// 如果这里不加[],别的hook执行，触发render，那么这个也会每次都执行，那么这里就也会每次render都执行，一直往数组里面push东西，所以下一次点击的时候数组里面会保存很多
useEffect(()=>{
console.log('change')
// 这个数组的检测其实是不能触发到的
// 引用类型的值其实这里是不能操作的
},[Arr])
}
只能再最顶层使用hook
1 .不能再循环，条件，或者嵌套函数里面调用。只有这样才能在hook每一次调用的时候按照相同的顺序被调用。
2 .保证react能够在多次的useState,useEffect调用之间保持hook状态的正确
3 .只能在react函数种调用hook，不能再普通js函数里面调用hook
4 .只要hook的调用顺序在多次渲染之间保持一致，react就能正确的将内部state和对应的Hook进行关联
useEffect模拟comonentDidMount生命周期
1 .可以使用useEffect(fn, [])，但是他们并不完全相等
2 .useEffect会捕获props,state，你拿到的值仅仅是初始的，执行这个函数的时候对应的值
3 .如果想要拿到最新的值，需要使用ref
4 .试图找到effect和生命周期一致的表达更容易使你混淆，需要做的还是要跳出生命周期函数
5 .
网友评论