react性能優化之useMemo,useCallback的使用

//useMemo,useCallback
import React, { memo, useMemo, useCallback, useState } from 'react';
// import About from './About';

const Foo = memo((props) => {
  let count = props.count;
  console.log("函數重新渲染");
  return <div onClick={props.addCount}>count:{count}</div>
});

// class App extends PureComponent {
//   state = {
//     count: 0,
//     name: 0
//   }
//   render() {
//     return (
//       <Fragment>
//         <Foo count={this.state.count} ></Foo>
//         <button onClick={() => { this.setState(() => ({ count: this.state.count + 1 })) }}>加count</button>
//       </Fragment>
//     )
//   }
// }
const App = memo(() => {
  const [count, setCount] = useState(0);
  let double = useMemo(() => {
    return count * 2
  }, [count==3]);
  let addCount=useCallback(()=>{    //useCallback 可以看成useMemo返回函數時的簡寫，賦值給onClick 不會引發函數重新渲染
    setCount((count) => count + 1)
  },[]);  //括號可以看成依賴數組，當為空時，只有第一次掛載時才會渲染，當有數據時如[count]，當count改變時才會改變，有多個數據時，所有數據改變時才會改變
  // const addCount=()=>{
  //   setCount((count) => count + 1)
  // }
  return (
    <div>
      <Foo addCount={addCount} count={double}></Foo>   //防止傳入函數會重復渲染，可以用上面的useMemo()或者它的簡易實現useCallback 返回一個函數，節省性能
      <button onClick={()=>{setCount((count) => count + 1)}}>count+1</button>   //直接賦值當數據改變時，這個函數會重復渲染浪費性能
   </div>
  )
})
export default App;