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

最新推荐文章于 2025-01-25 19:26:37 发布

原创最新推荐文章于 2025-01-25 19:26:37 发布 · 1.3k 阅读

CC 4.0 BY-SA版权

本文详细解析了React函数组件的执行过程，从初始化开始，解释了useState、useEffect、useMemo和useCallback的执行顺序和作用。useState用于创建状态和更新状态的方法，useEffect则用于副作用处理，useMemo和useCallback则根据依赖项进行优化，减少不必要的计算和函数创建。当状态变更时，组件重新渲染，相关hook也会依据新状态进行执行。

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