我到目前为止爱它 . 但是,因为我一直在想这个话题 . 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: ''
}
要更改这些字段,请说明我们有 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);
}
你们有什么感想?
1 回答
实际调度操作的成本是:
将操作传递给每个中间件
执行root reducer函数,如果你正在使用
combineReducers()
,它可能被分成几个slice reducer调用所有商店订阅回调
通常,中间件和reducer逻辑不是瓶颈 - 它正在更新可能很昂贵的UI . 使用React-Redux,每个连接的组件实例都是一个单独的订户 . 如果您有一个连接的List,其中有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操作的调度 .