react函数组件是怎样执行的？

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