-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
面试官:说说React render方法的原理?在什么时候会被触发? #205
Comments
在 React 中,类组件只要执行了 setState 方法,就一定会触发 render 函数执行,函数组件使用useState更改状态不一定导致重新render 这个就一定会触发,表达的不对吧,如果shouldComponentUpdate 返回false呢? |
这个需要手动调用比较才会返回false吧,默认值是true |
我是否可以理解为: render方法被调用以后,react会解析render返回的JSX,然后将解析的内容(对象)传给createElement生产DOM对象,实现了渲染? |
函数组件重新渲染 这里的示例代码是不是有问题呢?点击 button 更新了父组件 App 的 state , Foo 函数肯定被执行了吧 |
一、原理
首先,
render
函数在react
中有两种形式:在类组件中,指的是
render
方法:在函数组件中,指的是函数组件本身:
在
render
中,我们会编写jsx
,jsx
通过babel
编译后就会转化成我们熟悉的js
格式,如下:babel
编译后:从名字上来看,
createElement
方法用来元素的在
react
中,这个元素就是虚拟DOM
树的节点,接收三个参数:type:标签
attributes:标签属性,若无则为null
children:标签的子节点
这些虚拟
DOM
树最终会渲染成真实DOM
在
render
过程中,React
将新调用的render
函数返回的树与旧版本的树进行比较,这一步是决定如何更新DOM
的必要步骤,然后进行diff
比较,更新DOM
树二、触发时机
render
的执行时机主要分成了两部分:点击按钮,则调用
setState
方法,无论count
发生变化辩护,控制台都会输出Foo render
,证明render
执行了useState hook
修改状态函数组件通过
useState
这种形式更新数据,当数组的值不发生改变了,就不会触发render
只要点击了
App
组件内的Change name
按钮,不管Foo
具体实现是什么,都会被重新render
渲染可以发现,使用
useState
来更新状态的时候,只有首次会触发Foo render
,后面并不会导致Foo render
三、总结
render
函数里面可以编写JSX
,转化成createElement
这种形式,用于生成虚拟DOM
,最终转化成真实DOM
在
React
中,类组件只要执行了setState
方法,就一定会触发render
函数执行,函数组件使用useState
更改状态不一定导致重新render
组件的
props
改变了,不一定触发render
函数的执行,但是如果props
的值来自于父组件或者祖先组件的state
在这种情况下,父组件或者祖先组件的
state
发生了改变,就会导致子组件的重新渲染所以,一旦执行了
setState
就会执行render
方法,useState
会判断当前值有无发生改变确定是否执行render
方法,一旦父组件发生渲染,子组件也会渲染参考文献
The text was updated successfully, but these errors were encountered: