Javascript 将组件属性设置为常量数组/对象或重新创建每个渲染？

在设置组件的道具时，尽可能使用

const

变量，而不是将其设置为内联变量，这对性能或其他好处很好奇。如果适用，请包括支持性文件

在头脑中使用常量变量的潜在好处：

• 减少了每次渲染时创建对象的开销
• 更少的乱码
• 更少的生命周期/渲染循环？（这是我最关心的问题。）

示例1：内联/传统

export const SomeContainer（…）=>(
);

示例2：通过

const

变量

export const SomeContainer（…）=>(
);
常量验证器=[required（），minLength（3），maxLength（10）]；

在示例1中，

validators

prop是每个渲染上的一个新数组，而在示例2中，一个常量值被传递给

validators

prop

同一问题：

• 内联与常量对象。。。

  • value={{a，b，c}

  • value={ConstWithABC}

• 内联与常量回调。。。

  • onChange={value=>setState（{x:value}）}

  • onChange={handleChange}

    （

    handleChange

    是一个实例函数/const lambda）

---

React可以轻松跟踪状态变化。因此，第一点是直接重新呈现状态所有者组件（我们称之为XComponent）。然后，正如您已经知道的，重新渲染流将递归地在所有XComponent的子树上启动
执行此操作时，React将检查

prop

更改，以决定哪些子级应重新渲染，如：
• 如果

  prop

  是原语，将进行简单的值比较

• 如果

  prop

  是一个数组、函数或对象（这就是您在问题中提到的位置），那么将直接进行参考比较。这就是为什么有两个钩子用于此目的：

  usemo

  和

  useCallback

  。这些挂钩帮助您存储组件定义/计算中的引用或值结果。因此，由于引用相等，您的第二个示例很可能不会触发重新渲染。然后React可以在
  及其可能的子级之后停止修剪重新渲染树

我在过去更改

prop

数组项时遇到过这种情况。我看到React甚至没有意识到由于相同的数组引用，我将

prop

数组的长度从3更改为2。但我看到屏幕上还有3个项目
• 如果子项是某个迭代或映射的结果，如：

const Comp1=（道具）=>{
返回
{props.data.map（（项）=>）}
;
};

然后，将有一个

键

比较，以了解应该在渲染中添加或删除哪个子级。 React文档建议对键使用原语类型，以便于比较

---

总的来说，有一个文档可以更好地解释
基本上，您的示例都是值，我看不出有多大的性能差异
但是，如果您执行以下操作，则会有所不同

<Something value={[1000 numbers array].reduce((a,b) => a+b))} />

您只是指单个设置状态。如果是100行代码的函数呢？你要把它加入退货条款吗

---

<强>多次，除了性能外，我们还考虑可读性。即使在return子句中编写函数可以提供更好的性能，我也不会这样做。

谢谢。我的问题实际上更多的是关于React，以及在决定状态更改是否应触发重新渲染时，它如何考虑相同数组与具有相同内容的新数组。对不起。我是新来这里的。我应该先问这个问题。让我更新我的答案

<Something value={[1000 numbers array].reduce((a,b) => a+b))} />

const someNumber = useMemo(() => [1000 numbers array].reduce((a,b) => a+b)), [1000 numbers array])
return <Something value={someNumber} />

inline vs. const callbacks ...
onChange={value => setState({ x: value })}
onChange={handleChange} (handleChange is an instance function/const lambda)