派遣Redux行动是否被认为代价高昂

Question

我已经使用React-Redux-Typescript堆栈一段时间了，到目前为止我很喜欢它。然而，由于我是Redux的新手，我一直在想这个特定的话题调度Redux操作(和thunks(是否被认为是昂贵的操作，应该谨慎使用，还是应该像使用setState一样使用

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

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

还是最好创建本地组件状态，将状态绑定到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);
}

你们觉得怎么样？

Answer 1

实际调度操作的成本为：

• 通过每个中间件传递操作
• 执行根减少器函数，如果使用combineReducers()，该函数可能会拆分为几个切片减少器
• 正在调用所有商店订阅回调

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

Redux常见问题解答中有一些条目讨论了应用程序的性能和可扩展性，以及减少订阅通知的方法。

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