React函数组件创建时内部代码执行与渲染的先后顺序问询

答案非常明确：组件内部的所有同步代码会先执行完毕，之后才会把返回的元素渲染到屏幕上。

核心逻辑说明 #

你写的函数组件本质就是普通JavaScript函数，React渲染组件的完整流程是：

• 当React判定需要渲染<Test />组件时，会主动调用Test()函数，这个步骤属于React的「渲染阶段」
• 进入函数作用域后，完全遵循JS默认的代码执行顺序，从上到下执行所有同步代码：先完成testVar变量声明赋值、test函数声明，直到执行到return语句，拿到返回的虚拟DOM对象，Test()函数的调用才会结束
• 函数执行完成后，React才会进入「提交阶段」：拿着返回的虚拟DOM做Diff计算、更新真实DOM，最后才会把元素渲染到屏幕上，这一步完全在组件函数执行完毕后才会触发。

可自行验证的测试代码 #

你可以运行下面的代码查看控制台打印顺序，就能直观确认执行逻辑：

function Test(){
    console.log('进入Test组件函数')
    let testVar = 'testing';
    console.log('testVar声明完成：', testVar)
    function test(){
        console.log('test函数已声明')
    }
    console.log('test函数声明完成')
    console.log('即将返回渲染元素')
    return(
        <div className="test-element">I here just for testing purposes</div>
    )
}

运行后会发现所有console打印完成之后，页面才会出现对应的div元素。

内容的提问来源于stack exchange，提问作者Marwane Elalama