useEffect && uselayoutEffect

import React,{ useEffect,useState } from "react";
import "./styles.css";



export default function App() {
  const [n,setN] = useState(0)
  useEffect(()=>{
    console.log('第一次渲染之后执行的这一句话')
  },[])
  useEffect(()=>{
    if(n !== 0) {
      console.log('变化了')
    }
  },[n])

  useEffect(()=>{
    console.log('任何一个state变化时都会执行')
  })
  const onClick = () => {
    setN(n+1)
  }
  return (

      <div className="App">
        n:{n} <button onClick={onClick}>+1</button>
      </div>

  );
}

import React,{ useEffect,useState } from "react";
import "./styles.css";



export default function App() {
  useEffect(()=>{
    const id = setInterval(()=>{
      console.log('222')
    },100)
    return ()=>{
      window.clearInterval(id)
    }
  },[])

  return (

      <div className="App">
        1
      </div>

  );
}

import React,{ useState,useEffect ,useLayoutEffect} from "react";
import "./styles.css";



export default function App() {
 const [value,setValue] = useState(0)

 useLayoutEffect(()=>{
  document.querySelector('#x').innerHTML = 'value:1000'
 })

  return (

      <div className="App" id="x">
        {value}
      </div>

  );
}


/** 
 *  执行app的时候得到一个vdom
 * vdom =》 dom
 *  render完毕然后useeffect
*/

//所以会发现闪烁，我们可以在dom 在 改变外观这里插入uselayoutEffect