javascript - 用 setState() 更新嵌套的 React 状态属性的最佳选择是什么?
问题描述
我一直在考虑在这些选项中使用 React setState() 方法更新嵌套属性的最佳方法是什么。考虑到性能并避免与其他可能的并发状态更改可能发生冲突,我也对更有效的方法持开放态度。
注意:我正在使用扩展的类组件React.Component
。如果您正在使用React.PureComponent
,则在更新嵌套属性时必须格外小心,因为如果您不更改state
. 这是一个说明此问题的沙箱:
CodeSandbox - Component vs PureComponent 和嵌套状态变化
回到这个问题 - 我关心的是setState()
在更新状态的嵌套属性时其他并发调用之间的性能和可能的冲突:
例子:
假设我正在构建一个表单组件,我将使用以下对象初始化我的表单状态:
this.state = {
isSubmitting: false,
inputs: {
username: {
touched: false,
dirty: false,
valid: false,
invalid: false,
value: 'some_initial_value'
},
email: {
touched: false,
dirty: false,
valid: false,
invalid: false,
value: 'some_initial_value'
}
}
}
根据我的研究,通过使用setState()
,React 将浅合并我们传递给它的对象,这意味着它只会检查顶级属性,在这个例子中是isSubmitting
and inputs
。
因此,我们可以向它传递一个包含这两个顶级属性(isSubmitting
和inputs
)的完整 newState 对象,或者我们可以传递其中一个属性并将其浅合并到先前的状态中。
问题 1
您是否同意仅传递state
我们正在更新的顶级属性是最佳做法?例如,如果我们不更新isSubmitting
属性,我们应该避免将其传递给setState()
other 以避免可能与其他setState()
可能与此一起排队的并发调用发生冲突/覆盖?这个对吗?
在这个例子中,我们将传递一个只有inputs
属性的对象。setState()
这将避免与另一个可能试图更新isSubmitting
属性的冲突/覆盖。
问题2
在性能方面,复制当前状态以更改其嵌套属性的最佳方法是什么?
在这种情况下,假设我想设置state.inputs.username.touched = true
.
即使您可以这样做:
this.setState( (state) => {
state.inputs.username.touched = true;
return state;
});
你不应该。因为,从React Docs中,我们有:
state是对应用更改时组件状态的引用。它不应该直接突变。相反,应该通过基于状态和道具的输入构建一个新对象来表示更改。
因此,从上面的摘录中我们可以推断出我们应该从当前state
对象构建一个新对象,以便根据需要更改和操作它,并将其传递setState()
给更新state
.
而且由于我们正在处理嵌套对象,我们需要一种方法来深度复制对象,并且假设您不想使用任何 3rd 方库(lodash)来这样做,我想出的是:
this.setState( (state) => {
let newState = JSON.parse(JSON.stringify(state));
newState.inputs.username.touched = true;
return ({
inputs: newState.inputs
});
});
请注意,当您state
有嵌套对象时,您也不应该使用let newState = Object.assign({},state)
. 因为这会浅拷贝state
嵌套对象引用,因此您仍然会直接改变状态,因为newState.inputs === state.inputs === this.state.inputs
这是真的。它们都指向同一个对象inputs
。
但是,由于JSON.parse(JSON.stringify(obj))
它的性能限制,并且还有一些数据类型或循环数据可能对 JSON 不友好,您会推荐什么其他方法来深度复制嵌套对象以更新它?
我提出的另一个解决方案如下:
this.setState( (state) => {
let usernameInput = {};
usernameInput['username'] = Object.assign({},state.inputs.username);
usernameInput.username.touched = true;
let newInputs = Object.assign({},state.inputs,usernameInput);
return({
inputs: newInputs
});
};
我在第二个替代方案中所做的是从我要更新的最里面的对象(在本例中是username
对象)创建一个新对象。而且我必须在 key 中获取这些值username
,这就是我使用的usernameInput['username']
原因,因为稍后我会将它合并到一个newInputs
对象中。一切都是使用Object.assign()
.
第二个选项获得了更好的性能结果。至少好 50%。
关于这个主题的任何其他想法?很抱歉这个问题很长,但我认为它很好地说明了这个问题。
编辑:我从以下答案中采用的解决方案:
我的 TextInput 组件 onChange 事件监听器(我通过 React Context 提供服务):
onChange={this.context.onChange(this.props.name)}
我的表单组件中的 onChange 函数
onChange(inputName) {
return(
(event) => {
event.preventDefault();
const newValue = event.target.value;
this.setState( (prevState) => {
return({
inputs: {
...prevState.inputs,
[inputName]: {
...prevState.inputs[inputName],
value: newValue
}
}
});
});
}
);
}
解决方案
我可以想到其他一些方法来实现它。
解构每个嵌套元素并仅覆盖正确的元素:
this.setState(prevState => ({
inputs: {
...prevState.inputs,
username: {
...prevState.inputs.username,
touched: true
}
}
}))
使用解构运算符复制您的输入:
this.setState(prevState => {
const inputs = {...prevState.inputs};
inputs.username.touched = true;
return { inputs }
})
编辑
使用计算属性的第一个解决方案:
this.setState(prevState => ({
inputs: {
...prevState.inputs,
[field]: {
...prevState.inputs.[field],
[action]: value
}
}
}))
推荐阅读
- java - Maven 问题:-source 1.5 [错误] 不支持 switch 中的字符串(使用 -source 7 或更高版本来启用 switch 中的字符串)
- python - 如果 Django 在我请求时没有发送任何电子邮件,我该怎么办?
- typescript - 将 Record 构建为 Partial in 函数时如何返回 Record?
- node.js - 如何在不覆盖现有文件的情况下重命名文件?
- django - 重定向主页上的链接
- javascript - 使用 MVC 将多个值传递到服务器端 Datatable Jquery 中的按钮
- javascript - 对父变量禁用 ng
- replace - 我的 Google Docs 脚本用于多个搜索和替换(替换表)有什么问题
- json - 从 JSON 到 Unity 的输入二维数组
- fiware-cygnus - Cygnus-NGSI 1.9 docker 实例在一段时间(1 小时)后崩溃(mongo sink 停止存储数据)