React
1.setState是同步还是异步的
staState
setState 并不是单纯同步/异步的,它的表现会因调用场景的不同而不同:
1.setState只在合成事件和钩子函数中是异步的,在原生事件和setTimeout中是同步的
2.setState的异步并不是说内部由异步代码实现,其实本身执行的过程和代码都是同步的,
本质上是由 React 事务机制和批量更新机制的工作方式来决定的。
setState -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
setState的过程
每个组件实例,都有renderComponent方法
执行renderComponent会重新执行实例的render
render函数返回newVnode,然后拿到preVnode
执行patch(preVnode, newVnode)
2.React合成事件是如何实现的
React中的合成事件
合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象,它们将不同浏览器的行为合并为一个API,这样做是为了确
保事件在不同浏览器中显示一致的属性
在React中大部分的事件都不会直接绑定在具体元素上,除了一些不能冒泡的事件【媒体类型的事件】。
而是绑定在document上,当事件在具体的DOM上呗触发后,最终都会冒泡到document上,
document上绑定的统一事件处理程序会将事件分发到具体的组件实例。
在事件分发之前,React先对事件进行包装,把原生DOM事件包装为合成事件。
如果需要访问DOM原生事件对象的时候,则可以通过e.nativeEvent,
React事件系统背后的动机是什么呢?
1.官方的说明,合成事件符合W3C规范,在底层抹平了不同浏览器之间的差异。向开发者暴露了统一、
稳定的、并且和DOM原生事件相同的事件接口。让开发者不再关注底层兼容的问题,可以专注于业务逻辑的开发
2.自定义事件系统,让React掌握了事件处理的主动权,方便React对事件的中心化管控。
3. redux使用需要注意的地方
1. react和redux没有直接联系,当react需要结合redux使用的时候,需要引入 react-redux ,该插件提供了
connet等方法使得react可以注入redux属性。
2. redux修改 state的值的时候不能直接修改,需要重新声明变量,然后修改这个变量,返回这个变量覆盖原先的
state值
4.什么场景会触发重新渲染
1.首次加载
2.setState改变组件内部state(注意:通过setState方法改变)
3.接收到新的props
5. setState返回一样的引用,render会执行吗
会,所以要用shouldComponentUpdate来进行优化
6. useMemo和useCallback的区别,它们的实现原理是什么?
为了减少组件渲染,我们可以优化,设置组件的属性变了才重新渲染,如果没变则不渲染。
useMemo 减少对象创建的次数
useCallback 减少函数创建的次数
a.作用
useMemo: 用于缓存传入的props避免依赖的组件每次都重新渲染
useCallback: 缓存回调函数避免传入的回调每次都是新的函数实例而导致
依赖组件重新渲染具有性能优化的效果
b.返回值
useMemo返回缓存的变量,useCallback返回缓存的函数。
c.场景
useMemo: 创建了两个state,然后通过expensive函数,执行一次昂贵的计算,
拿到count对应的某个值。我们可以看到:无论是修改count还是val,由于组件的重新渲染,
都会触发expensive的执行(能够在控制台看到,即使修改val,也会打印);
但是这里的昂贵计算只依赖于count的值,在val修改的时候,是没有必要再次计算的。
在这种情况下,我们就可以使用useMemo,只在count的值修改时,执行expensive计算:
useCallback: 有一个父组件,其中包含子组件,子组件接收一个函数作为props;
通常而言,如果父组件更新了,子组件也会执行更新;但是大多数场景下,更新是没有必要的,
我们可以借助useCallback来返回函数,然后把这个函数作为props传递给子组件;这样,
子组件就能避免不必要的更新
7. React Hooks有什么优势和劣势
www.jb51.net/article/210…
8. con
blog.csdn.net/weixin_4565…
9. React dom绑定事件和原生事件有什么区别
blog.csdn.net/weixin_4596…
10. Hooks的实现原理
www.jianshu.com/p/d41e6b09e…
11. fiber的实现原理
blog.csdn.net/snsHL9db69c…