小编典典

调度Redux操作是否被视为昂贵?

reactjs

我已经使用React-Redux-
Typescript堆栈已有一段时间了,到目前为止,我一直很喜欢它。但是,由于我是Redux的新手,所以一直想知道这个特定主题。
调度Redux动作(和重击)是否被认为是昂贵的操作,应该谨慎使用,还是应该与setState一样使用?

假设Redux状态只有一个化简器来管理用户信息:

const initialState = {
  firstName: '',
  lastName: ''
}

并且要更改这些字段,可以说setFirstNamesetLastName为了简单起见,我们可以执行,,等操作。

假设在“视图”中我有一个输入元素render()

<input onChange={this.firstNameInputChangeListener} placeholder="First Name"/>

考虑到setFirstName已经映射到该组件:

export default connect(state => state, { setFirstName })(ThisComponent);

每次输入发生更改时调度动作是否最佳:

public firstNameInputChangeListener = (event) => {
  this.props.setFirstName(event.target.value);
}

还是创建本地组件状态,将状态绑定到Change Listener并仅在提交表单时才调度操作是更好的选择:

public state = {
  firstName: this.props.firstName;
}

public firstNameInputChangeListener = (event) => {
  this.setState({ firstName: event.target.value });
}

public submitButtonListener = (event) => {
  this.props.setFirstName(this.state.firstName);
}

你们有什么感想?


阅读 247

收藏
2020-07-22

共1个答案

小编典典

实际分派动作的成本为:

  • 通过每个中间件传递操作
  • 执行根缩减器功能,如果您正在使用的话,它可能会分成多个切片缩减器 combineReducers()
  • 调用所有商店订阅回调

通常,中间件和reducer逻辑不是瓶颈-它更新的UI可能很昂贵。使用React-
Redux,每个连接的组件实例都是一个单独的订户。如果您的连接列表具有10000个连接的ListItems,则为10001个订阅者。

Redux FAQ中的条目讨论了应用程序的性能和可伸缩性,以及减少订阅者通知的方法

具体来说,对于表单中的每个按键,应用程序的其余部分都不太可能 需要
更新。为此,对调度进行防抖是非常合理的。我的博客文章《实用Redux,第7部分:表单更改处理和数据编辑》展示了一个可重用的组件,该组件可以包装输入或表单以在UI中实现快速更新,同时还取消了Redux操作的分派。

2020-07-22