首页 文章

派遣Redux行动被认为是昂贵的吗?

提问于
浏览
2

我到目前为止爱它 . 但是,因为我一直在想这个话题 . Is dispatching Redux actions (and thunks) considered expensive operations and should be used sparingly, or should it be used as much as setState is used?

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

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);
}

你们有什么感想?

1 回答

  • 1

    实际调度操作的成本是:

    • 将操作传递给每个中间件

    • 执行root reducer函数,如果你正在使用 combineReducers() ,它可能被分成几个slice reducer

    • 调用所有商店订阅回调

    通常,中间件和reducer逻辑不是瓶颈 - 它正在更新可能很昂贵的UI . 使用React-Redux,每个连接的组件实例都是一个单独的订户 . 如果您有一个连接的List,其中有10000个连接的ListItem,那就是10001个订阅者 .

    Redux FAQ有条目讨论app performance and scalabilityways to cut down on subscriber notifications .

    特别是对于表单,表单中的每次击键都不一定需要更新应用程序的其余部分 . 为此,去除调度是非常合理的 . 我的博客文章Practical Redux, Part 7: Form Change Handling and Data Editing显示了一个可重用的组件,它可以包装输入或表单以在UI中实现快速更新,同时还可以解除Redux操作的调度 .

相关问题