reactHooks性能優化寫法

import React, {
  Component,
  useState,
  useCallback,
} from 'react';
import ReactDOM from 'react-dom';
let Child = React.memo(function({ val, onChange }) {
  console.log('render...');

  return (
    <div>
      請輸入：
      <input value={val} onChange={onChange} />
    </div>
  );
});

let ChildChild = React.memo(function({ val, onChange }) {
  console.log('renderChildChild...');

  return (
    <div>
      請確認：
      <input value={val} onChange={onChange} />
    </div>
  );
});

let ChildChildChild = React.memo(function() {
  console.log('haoahofihd...');

  return (
    <div>
      請說明：
      我會更新嗎
    </div>
  );
});

function App() {
  let [val1, setVal1] = useState('');
  let [val2, setVal2] = useState('');

  let onChange1 = useCallback(evt => {
    setVal1(evt.target.value);
  }, []);

  let onChange11 = useCallback(evt => {
    setVal1(evt.target.value);
  }, []);

  let onChange2 = useCallback(evt => {
    setVal2(evt.target.value);
  }, []);

  let onChange22 = useCallback(evt => {
    setVal2(evt.target.value);
  }, []);

  return (
    <div>
      <Child val={val1} onChange={onChange1} />
      <ChildChild val={val2} onChange={onChange2} />
      <ChildChildChild />
    </div>
  );
}

let styles = {
  btn: {
    marginTop: '5px',
  },
};

// mountNode 為 Playground 預置節點
ReactDOM.render(<App />, mountNode);