使用Hooks的有状态函数组件默认Props最优实现方式问询

你遇到的问题其实是React函数式组件里很常见的引用稳定性陷阱——当你在默认参数里直接写非原始类型的值（比如{a:1}）时，每次组件渲染都会创建一个全新的对象，导致prop的引用地址发生变化。而useEffect会监听这个引用变化，触发回调更新状态，状态更新又会引发组件重新渲染，如此往复就形成了无限循环。

虽然React官方推荐用ES6默认参数替代defaultProps，但确实需要注意非原始类型默认值的引用稳定性问题。下面给你几个更优雅的解决方案：

方案1：将非原始类型默认值提取为组件外部常量 #

把默认值定义在组件作用域之外，确保每次渲染时它的引用都是同一个对象：

// 把默认值放在组件外部，保证引用稳定
const DEFAULT_PROP = { a: 1 };

const Child = ({ prop = DEFAULT_PROP }) => {
  const [x, setX] = React.useState(1);

  React.useEffect(() => {
    // 使用函数式更新，避免依赖x本身
    setX(prevX => prevX + 1);
  }, [prop]);

  return <div>{x}, {prop.a}</div>;
};

为什么有效？ #

• 外部常量DEFAULT_PROP的引用在组件生命周期内不会改变，当父组件不传prop或传undefined时，prop会指向这个常量对象，useEffect的依赖不会无故变化。
• 用函数式更新setX(prevX => prevX + 1)可以避免把x加入依赖数组，进一步减少不必要的渲染触发。

方案2：用useMemo缓存处理后的Props #

如果默认值需要根据其他props动态生成（或者你想把处理逻辑集中起来），可以用useMemo缓存处理后的结果，确保只有原始prop变化时才重新计算：

const Child = ({ prop }) => {
  const [x, setX] = React.useState(1);
  
  // 缓存处理后的prop，仅在原始prop变化时更新
  const defaultedProp = React.useMemo(() => {
    // 使用nullish coalescing operator（??）更精准判断undefined/null
    return prop ?? { a: 1 };
  }, [prop]);

  React.useEffect(() => {
    setX(prevX => prevX + 1);
  }, [defaultedProp]);

  return <div>{x}, {defaultedProp.a}</div>;
};

为什么有效？ #

• useMemo会缓存返回值，只有当依赖数组里的prop变化时，才会重新执行回调生成新对象，保证defaultedProp的引用稳定。
• 这种方式更灵活，适合默认值需要动态计算的场景。

方案3：解构时单独给嵌套属性设置默认值（适用于简单对象） #

如果你的prop是嵌套对象，也可以在解构时直接给子属性设置默认值，避免创建整个新对象：

const Child = ({ prop: { a = 1 } = {} }) => {
  const [x, setX] = React.useState(1);

  React.useEffect(() => {
    setX(prevX => prevX + 1);
  }, [prop]); // 注意：这里依赖的还是原始prop，如果父组件传undefined，prop仍是undefined

  return <div>{x}, {a}</div>;
};

为什么有效？ #

• 这种方式不会创建新的对象，只是在解构时给子属性设置默认值，当父组件传undefined时，prop还是undefined，但a会取默认值1，避免了引用变化的问题。

总结 #

核心思路就是保证默认props的引用稳定性：

• 对于静态的非原始类型默认值，优先放在组件外部作为常量。
• 动态场景下用useMemo缓存处理结果。
• 配合函数式更新setState，减少不必要的依赖项。

这样既符合React官方推荐的ES6默认参数写法，又能避免无限循环问题，代码也更简洁易维护。

内容的提问来源于stack exchange，提问作者ManavM