React混淆知识点汇总

267 阅读1分钟

react

state视图变化

function组件中,如果需要改变数据引起视图更新,必须将数据定义在useState中。使用useState更新数据才会触发视图更新

  • 普通数据类型的变更无法触发视图更新 image.png
  • setState更新数据触发更新 image.png

umi+dva

避免effects、reducers同名

在models中定义的effectsreducers都可以通过dispatch进行派发,派发方式:

dispatch({ type: 'namespace/xxx' })

如果在同一个namespace中存在effectsreducers的同名方法,使用dispatch派发该方法会同时触发effectsreducers,若此时effects该方法中同步调用了reducers的该方法,这可能导致无限循环

image.png

useEffect和useLayoutEffect的区别

参考文章

useEffect

  useEffect函数会在浏览器会在浏览器完成布局与绘制之后, 在一个延迟事件中被调用。

useLayoutEffect

  其签名函数与useEffect相同,但是它会在所有DOM变更(diff之后render之前)之后同步调用effect。可以使用它来读取DOM布局并同步触发重渲染。在浏览器执行绘制之前,useLayoutEffect内部更新计划被同步刷新。 阻塞了浏览器的绘制

两者的区别

  useEffect是异步执行,在浏览器渲染之后执行。useLayoutEffect是同步执行,在浏览器渲染之前更新,阻塞了浏览器的绘制