React JS 使用Memo Hook

useMemo 是在 react 的功能组件中使用的钩子，它返回一个 memoized 值。在计算机科学中，记忆化是一个普遍使用的概念，当我们下次不需要使用给定参数重新计算函数时，它会返回缓存的结果。记忆函数会记住给定输入集的输出结果。例如，如果有一个函数要添加两个数字，并且我们第一次将参数设置为 1 和 2，该函数会将这两个数字相加并返回 3，但是如果再次输入相同的输入，则我们将返回缓存的值即 3 并且不再使用 add函数计算。在 react 中，我们也使用了这个概念，只要在 React 组件中，状态和 props 不会改变组件并且组件不会重新渲染，它会显示相同的输出。 useMemo 钩子用于提高我们的 React 应用程序的性能。

句法：

const memoizedValue = useMemo(functionThatReturnsValue, 
                                   arrayDepencies)

示例：当我们不使用 useMemo Hook 时。

Javascript

import React, {useState} from 'react';
  
function App() {
  const [number, setNumber] = useState(0)
  const squaredNum =  squareNum(number);
  const [counter, setCounter] = useState(0);
  
 // Change the state to the input
  const onChangeHandler = (e) => {
    setNumber(e.target.value);
  }
    
  // Increases the counter by 1
  const counterHander = () => {
    setCounter(counter + 1);
  }
  return (
    

      
Welcome to Geeksforgeeks
      
      
        
      
OUTPUT: {squaredNum}
      Counter ++
      
Counter : {counter}
    
  );
}
  
// function to square the value
function squareNum(number){
  console.log("Squaring will be done!");
  return Math.pow(number, 2);
}
  
export default App;

输出：在上面的示例中，我们有一个 App 组件，该组件正在做两件事，一是在给定输入上对数字进行平方，然后递增计数器。我们这里有两个状态 number 和 counter，每当任何状态更改组件重新渲染时。例如，如果我们改变数字的输入值，函数squareNum 运行，如果再次增加计数器，函数squareNum 运行。我们可以在控制台上看到这一点。

在这种情况下，我们可以看到，即使我们更改了一次输入数字，但多次单击增量计数器，每当我们多次单击增量计数器按钮时，我们的函数squareNum 都会执行。发生这种情况是因为每当我们更改计数器的状态时，App 组件都会重新渲染。

现在让我们使用 useMemo 钩子来解决这个问题。

示例：当我们使用 useMemo Hook

Javascript

import React, {useState} from 'react';
  
function App() {
  const [number, setNumber] = useState(0)
  // Using useMemo
  const squaredNum = useMemo(()=> {
    return squareNum(number);
  }, [number])
  const [counter, setCounter] = useState(0);
  
 // Change the state to the input
  const onChangeHandler = (e) => {
    setNumber(e.target.value);
  }
    
  // Increases the counter by 1
  const counterHander = () => {
    setCounter(counter + 1);
  }
  return (
    

      
Welcome to Geeksforgeeks
      
      
        
      
OUTPUT: {squaredNum}
      Counter ++
      
Counter : {counter}
    
  );
}
  
// function to square the value
function squareNum(number){
  console.log("Squaring will be done!");
  return Math.pow(number, 2);
}
  
export default App;

输出：现在在上面的例子中，我们使用了用户备忘录挂钩，这里返回值的函数即 squareNum 在 useMemo 和数组依赖项中传递，我们使用了数字，因为 squareNum 仅在数字变化。如果我们增加计数器并且输入字段中的数字保持不变，则 squareNum 不会再次运行。让我们看看下面的输出。

现在我们可以在控制台中看到 squareNum 仅在输入框发生变化时才运行，而不是在单击增量计数器的按钮时运行。

注意：记忆从来都不是免费的，我们是在用空间换时间。