react函数组件是怎样执行的?
总结:
1.首先初始化,会按顺序执行组件中的所有函数,然后组件被挂载到根节点上。
- 遇到useState执行会生成一个state和setState存在当前组件作用域中
- 遇到useEffect之后回去订阅其中的消息,然后再组件挂载后去发布消息
- 遇到useMemo或者useCallback就会根据他们依赖的状态去缓存,属性(函数返回结果值)或方法
2.当setState状态改变后,又会去执行对应的组件函数。
- 遇到useState也会去执行,返回修改后的状态(指向新的地址,所以可以用const)
- 遇到useEffect、useMemo、useCallback就会根据第二个参数中的状态依赖,来判断怎样执行。
import React , {useState,useEffect,useMemo,useCallback} from 'react'
const Com= () => {
const [state,setState]=useState(false)//执行返回 const的state和setState
useEffect(()=>{
},[state])//根据返回的state去判断,执行
useMemo(()=>{
return 1
},[state])//根据返回的state去判断缓存属性(函数返回结果值)
useCallback(()=>{
},[state])//根据返回的state去判断缓存方法
function func(){
console.log('执行func')
}
func()//每次setState去触发视图更新之后,都会被执行
return (
<div onClick={()=>{setState(!state)}}>{state}</div>
)
}
export default Com