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);