面试题：React中如何正确初始化函数式组件的State

Question

在React函数式组件中，使用useState钩子初始化State，有哪些需要注意的地方？请举例说明如何初始化一个对象类型的State以及如何避免不必要的重新渲染。

Answer 1

使用useState钩子初始化State的注意事项

1. 初始值计算：如果初始值是通过复杂计算得出，建议使用函数形式初始化，以避免在每次渲染时都进行计算。例如：

import React, { useState } from 'react';

// 假设getInitialValue是一个复杂计算函数
const getInitialValue = () => {
  // 复杂计算逻辑
  return 42;
};

const MyComponent = () => {
  // 使用函数形式初始化state
  const [count, setCount] = useState(getInitialValue);
  return <div>{count}</div>;
};

2. 引用类型注意点：对于对象或数组等引用类型的初始值，直接修改内部属性不会触发重新渲染，需要创建新的引用。

初始化对象类型的State

import React, { useState } from 'react';

const MyObjectComponent = () => {
  const initialObject = { name: 'John', age: 30 };
  const [user, setUser] = useState(initialObject);

  const handleClick = () => {
    // 创建新对象，以触发重新渲染
    setUser({ ...user, age: user.age + 1 });
  };

  return (
    <div>
      <p>{user.name} is {user.age} years old.</p>
      <button onClick={handleClick}>Increment Age</button>
    </div>
  );
};

避免不必要的重新渲染

1. 使用React.memo：对于函数式组件，可以使用React.memo包裹组件，它会对props进行浅比较，如果props没有变化，组件不会重新渲染。

import React from'react';

const MyMemoizedComponent = React.memo((props) => {
  return <div>{props.value}</div>;
});

2. useCallback和useMemo：
   • useCallback用于缓存函数，避免函数在每次渲染时都重新创建。例如：

import React, { useState, useCallback } from'react';

const MyCallbackComponent = () => {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return <button onClick={handleClick}>Increment</button>;
};

• useMemo用于缓存计算结果，只有依赖项变化时才重新计算。例如：

import React, { useState, useMemo } from'react';

const MyMemoComponent = () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  const sum = useMemo(() => {
    return a + b;
  }, [a, b]);

  return (
    <div>
      <input type="number" value={a} onChange={(e) => setA(Number(e.target.value))} />
      <input type="number" value={b} onChange={(e) => setB(Number(e.target.value))} />
      <p>The sum of a and b is: {sum}</p>
    </div>
  );
};