我已经使用React-Redux- Typescript堆栈已有一段时间了,到目前为止,我一直很喜欢它。但是,由于我是Redux的新手,所以一直想知道这个特定主题。 调度Redux动作(和重击)是否被认为是昂贵的操作,应该谨慎使用,还是应该与setState一样使用?
假设Redux状态只有一个化简器来管理用户信息:
const initialState = { firstName: '', lastName: '' }
并且要更改这些字段,可以说setFirstName,setLastName为了简单起见,我们可以执行,,等操作。
setFirstName
setLastName
假设在“视图”中我有一个输入元素render():
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); }
你们有什么感想?
实际分派动作的成本为:
combineReducers()
通常,中间件和reducer逻辑不是瓶颈-它更新的UI可能很昂贵。使用React- Redux,每个连接的组件实例都是一个单独的订户。如果您的连接列表具有10000个连接的ListItems,则为10001个订阅者。
Redux FAQ中的条目讨论了应用程序的性能和可伸缩性,以及减少订阅者通知的方法。
具体来说,对于表单中的每个按键,应用程序的其余部分都不太可能 需要 更新。为此,对调度进行防抖是非常合理的。我的博客文章《实用Redux,第7部分:表单更改处理和数据编辑》展示了一个可重用的组件,该组件可以包装输入或表单以在UI中实现快速更新,同时还取消了Redux操作的分派。