react hook中的不理解

Question

useMutationEffect和useLayoutEffect的区别怎么这么不明显？有什么区别么？
自己做实验`console.log('开始代码上的use')//1

  useEffect(() => {//6
    const btn = document.getElementById('btn')
    console.log(btn, btn.style.backgroundColor, btn.style.width, btn.style.color, 'useEffect')
  })

  //5和6之间出view
  useLayoutEffect(() => {//5
    const btn = document.getElementById('btn')
    console.log(btn, btn.style.backgroundColor, btn.style.width, btn.style.color, 'useLayoutEffect') 
  })

  useMutationEffect(() => {//4
    const btn = document.getElementById('btn')
    console.log(btn, btn.style.backgroundColor, btn.style.width, btn.style.color, 'useMutationEffect')
  })
  console.log('结束代码上的use')//2
  return (
    <div>
      {computed}
      <input type = 'text' value = { value } onChange = {(e) => setValue(e.target.value)} />
      <br />
      <input type = 'text' value = { name} onChange = {(e) => setName(e.target.value)}/>
      <Button onClick = { handleClick } style = {{ backgroundColor: 'red', width: '50px', color: color}} id = 'btn'/>
      {console.log('render')}{/* //3 */}
      
    </div>
  )
}`

发现除了顺序不同并没有明显区别？看来很多文档都是这样描述的：
useMutationEffect
api与useEffect相同，但在更新兄弟组件之前，它在React执行其DOM改变的同一阶段同步触发。使用它来执行自定义DOM改变。

useLayoutEffect
api与useEffect相同，但在所有DOM改变后同步触发。使用它来从DOM读取布局并同步重新渲染。在浏览器有机会绘制之前，将在useLayoutEffect内部计划的更新将同步刷新。

然后就是这句：
注意 避免在useMutationEffect中读取DOM。在读取计算样式或布局信息时，useLayoutEffect更合适。
然后这篇文章：https://stackoverflow.com/que...；有什么通俗易懂的解释能说清楚的？或者是用代码直观的证明？？