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

我已经使用 React - Redux - Typescript 堆栈有一段时间了，到目前为止我很喜欢它。然而，由于我对 Redux 还很陌生，所以我一直想知道这个特定的话题。调度 Redux 操作（和 thunk）是否被认为是昂贵的操作并且应该谨慎使用，还是应该像使用 setState 一样多地使用它？

假设 Redux 状态有一个管理用户信息的减速器：

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

为了改变这些字段，假设我们有类似的操作setFirstName, setLastName等等...只是为了简单起见。

假设在视图中我有一个输入元素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);
}

或者更好的方法是创建本地组件状态，将状态绑定到更改侦听器，并仅在提交表单时分派操作：

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

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

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

你们有什么感想？

实际调度一个动作的成本是：

• 通过每个中间件传递操作
• 执行根减速器函数，如果您使用的话，它可能会分成几个切片减速器combineReducers()
• 调用所有商店订阅回调

一般来说，中间件和减速器逻辑不是瓶颈——它更新 UI 的成本可能很高。使用 React-Redux，每个连接的组件实例都是一个单独的订阅者。如果您有一个包含 10000 个连接的 ListItem 的连接列表，则有 10001 个订阅者。

Redux FAQ 有条目讨论应用程序性能和可扩展性, and 减少订阅者通知的方法.

特别是对于表单来说，应用程序的其余部分不太可能needs表单中的每次击键都会更新。因此，取消调度是非常合理的。我的博文实用 Redux，第 7 部分：表单更改处理和数据编辑展示了一个可重用的组件，它可以包装输入或表单以实现 UI 中的快速更新，同时还可以消除 Redux 操作的调度。