React hook 渲染额外的时间

React Hook 是 React 16.8 版本引入的一种新的特性，它允许我们在函数组件中使用状态和其他 React 特性，而无需编写类组件。使用 React Hook 可以让我们更方便地管理组件的状态和副作用，同时提高代码的可读性和可维护性。

javascript
import React, { useMemo } from 'react';
const MyComponent = () => {
  const data = [1, 2, 3, 4, 5];
  const sum = useMemo(() => {
    console.log('Calculating sum...');
    return data.reduce((a, b) => a + b, 0);
  }, [data]);
  return (
    
      
Sum: {sum}
    
  );
};
export default MyComponent;

javascript
import React, { useCallback, useState } from 'react';
const MyComponent = () => {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    console.log('Button clicked');
    setCount(count + 1);
  }, [count]);
  return (
    
      
Count: {count}
      Click
    
  );
};
export default MyComponent;