在 React 中，props 是组件与组件之间传递数据的重要方式，但是在实际开发中，我们经常会遇到需要动态改变 props 的情况。然而，直接改变 props 是一个危险的做法，可能会导致不可预期的结果。本文将讲解在 React 中改变 props 的正确做法以及一些应该避免的方法。
为什么直接改变 props 是不好的
在 React 中，props 是一个只读的对象，一旦传递给组件，它就不能被子组件修改。这样做是为了保证组件的可预测性和可重用性，防止子组件直接修改父组件的状态，导致不可预期的结果。
如果直接改变 props，这个不可变性就被打破了，可能会导致一些莫名其妙的 bug。同时，这也会影响组件的性能，因为每次 props 改变时，组件都需要重新渲染。
正确的做法：改变父组件的状态
在 React 中，如果想改变 props，应该使用父组件的状态来控制 props。父组件的状态是可读可写的，而且可以被改变，然后再传递给子组件。
举个例子，假设我们有一个 Count 组件，用来显示一个数字，它的数字由父组件传递过来。现在我们想要实现一个自增按钮，每点击一次，数字就加 1。我们可以按以下步骤来实现：
- 定义一个父组件 App 组件，它包含 Count 组件和一个按钮。
- 为 App 组件添加一个状态 count，用来保存数字。
- 当按钮被点击时，修改 count 状态，然后把 count 传递给 Count 组件。
下面是代码示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- ----------
-------- ----- -
----- ------- --------- - ------------
-------- ------------- -
-------------- - ---
-
------ -
-----
------- ---------------------------------
------ ------------- --
------
--
-
------ ------- ----在 App 组件中，我们使用 useState hook 定义了一个状态 count，初始值为 0。当按钮被点击时，调用 handleClick 函数，修改 count 状态。然后把 count 传递给 Count 组件，作为它的 props。
在 Count 组件中，我们只需要把 props.count 显示出来即可：
import React from 'react';
function Count(props) {
return <div>{props.count}</div>;
}
export default Count;这样，每次点击按钮，数字就会加 1，Count 组件也会随之更新。
应该避免的做法
除了直接改变 props，还有一些做法也应该尽量避免，包括：
1. 在组件内部改变 props
这是一种非常危险的做法，会导致组件的行为变得不可预测。在 React 中，props 是只读的，组件不应该修改它。如果组件需要改变某个值，应该把它作为状态来管理。
2. 在 shouldComponentUpdate 中改变 props
shouldComponentUpdate 是一个生命周期函数，用来判断组件是否需要重新渲染。如果返回 false，组件将不会更新。在 shouldComponentUpdate 中改变 props 是不合适的，会导致组件的状态变得不一致。
3. 使用 forceUpdate
forceUpdate 是一个函数，可以强制组件重新渲染，但不会触发 shouldComponentUpdate。这个函数应该尽量避免使用，因为它会导致组件的状态变得不可预测。
结论
在 React 中，改变 props 是一项需要谨慎处理的任务。我们应该尽可能避免直接改变 props，而是使用父组件的状态来控制子组件的 props。这样有助于保持组件的可预测性和可重用性。如果需要改变组件内部的某个值，应该把它作为状态来管理，而不是直接修改 props。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672165bc2e7021665e074873