react useMemo

• 1.检测变化 之前只要数据变化整个页面都会刷新 这样A变化 那就只重新渲染A 降低性能消耗

　　2. 跟A有关的 也会重新渲染

import React from 'react'
function Hello() {
  let [nameA, setNameA] = React.useState('zjqA')
  let [nameB, setNameB] = React.useState('zjqB')
  const changeNameFunA = () => {
    setNameA("AAAA")
  }
  const changeNameFunB = () => {
    setNameB("BBBB")
  }


  const comA = React.useMemo(() => <A name={nameA} />, [nameA])
  const comB = React.useMemo(() => <B name={nameB} />, [nameB])


  return (
    <div>
      {comA}
      {comB}
     
      <button onClick={changeNameFunA}>点击改变nameA</button>
      <button onClick={changeNameFunB}>点击改变nameB</button>
    </div>
  );
}

const  A : React.FC<any>=({name})=>{
  console.log("A组件重新渲染")
  return (
    <>
      <h1>我是A组件：{name}</h1>
    </>
  )
}

const  B : React.FC<any>=({name})=>{
  console.log("B组件重新渲染")
  return (
    <>
      <h1>我是B组件：{name}</h1>
    </>
  )
}



export default Hello;

 

function App() {
  let [name, setName] = React.useState('zjq')

  const changeNameFunA = () => {
    setName("AAAA")
  }
  const XHnameMemo = React.useMemo(()=>name+'小红',[name])

  return (
    <div className="App">
      {/* <Page/> */}
   
      {/* <Pages/> */}
      <h1>我的名字是：{name}</h1>
      <button onClick={changeNameFunA}>点击改变name</button>
      <h1>小红的名字是：{XHnameMemo}</h1>

    {/* <Hello/> */}
 
    </div>
  );
}

export default App;