【2022.8.29】性能优化

[lkzwc]

首先说原因

主要是和react的更新机制有关，在一棵组件树中，最低层的节点更新之后，react会全量更新，生成整颗组件树，为了让react跳过没有变化的组件，于是就诞生了性能优化一说

将变的一部分和不变的一部分分离

num刷行会导致Count组件刷新

function APp(){
   const [num,setNum] = useState()
  return (
   <div>
    {num}
   <Count/>
  </div>
  )
}

function Main(){
  const [num,setNum] = useState()
  return <div>{num}</div>
}

function App(){
  
  return (
   <div>
  <Main/>
   <Count/>
  </div>
  )
}

状态下沉

function App(){
  const [num,setnum] = useState()

 return <div title={num}>
   {num}
   <Count/>
  </div>
}

优化后：

function AppWarpper(){
  const [num,setnum] = useState()

 return <div title={num}>
   {num}
   {children}
  </div>
}

function App(){
 return <AppWarpper>
      <Count/>
  </AppWarpper>
}

默认的性能优化

当父组件状态不可变，子组件的state和conten都没有变化的时候，会触发自动优化
[props，[state, context]子]

react的默认比较是全等比较，在使用react.mome之后采用浅比较，比如我们在使用usememo的时候，只有保证子组件是浅比较之后才会有效

注意点

如果Props如果什么都没有传，但是react仍旧会传一个空对象，全等比较依旧不会通过