简书Header组件开发（性能优化）

避免无意义的AJAX请求发送

之前我们设置的有点问题，每次点击搜索框都会获取一次AJAX请求：

但实际上我们只需要获取一次就够了。

解决方法

调用 点击事件函数handleInputFocus 时传入list数据，函数中判断只有list===0时才发送AJAX请求。

解决代码

1. 调用 点击事件函数handleInputFocus 时传入list数据：

2. 函数handleInputFocus接受并打印list：

可以看到两次点击获取到的list中size是不同的，所以我们可以通过list.size判断是否发送AJAX请求：

只有当list.size===0时才发送请求，其实这行代码就相当于下面的3行代码：

if(list.size === 0){
dispatch(actionCreators.getList())
}

结果：点击多次也只发送一次请求

---

优化样式

实现样式：鼠标移到“换一批”上则变手形状：

优化方法：

---