reactjs - 调度 Redux 操作是否被认为是昂贵的？

Question

我已经使用 React - Redux - Typescript 堆栈有一段时间了，到目前为止我很喜欢它。但是，由于我对 Redux 很陌生，所以我一直在想这个特定的话题。 调度 Redux 操作(和 thunk)是否被认为是昂贵的操作，应该谨慎使用，还是应该尽可能多地使用 setState？

假设 Redux 状态有一个管理用户信息的 reducer:

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

为了更改这些字段，假设我们有 setFirstName、setLastName 等操作...只是为了简单起见。

假设在 View 中，我在 render() 中有一个输入元素:

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

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

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

每次输入发生变化时发送 Action 是否最佳:

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

还是创建本地组件状态，将状态绑定(bind)到 Change Listener 并仅在提交表单时分派(dispatch)操作更好:

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

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

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

大家怎么看？

Answer 1

实际调度一个 Action 的成本是:

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

一般来说，中间件和 reducer 逻辑不是瓶颈 - 它更新 UI 可能会很昂贵。使用 React-Redux，每个连接的组件实例都是一个单独的订阅者。如果您有一个包含 10000 个连接的 ListItem 的连接列表，那就是 10001 个订阅者。

Redux FAQ 中有条目讨论 app performance and scalability , 和 ways to cut down on subscriber notifications .

对于特定的表单，应用程序的其余部分需要在表单中的每次击键时更新是不太可能的。为此，取消调度是非常合理的。我的博文Practical Redux, Part 7: Form Change Handling and Data Editing显示了一个可重用的组件，它可以包装输入或表单以在 UI 中启用快速更新，同时还消除了 Redux 操作的分派(dispatch)。