supernova16 / fend Goto Github PK

• 延伸阅读：常见的 2D 碰撞检测
• 在声明变量的时候都推荐用关键字显式的声明（比如 let n = 1），如果不这样的话，变量就会自动变成全局变量（可以试试在浏览器开发者工具 console 标签页 console.log(n) 输出看到）。
  我们要尽量避免污染全局作用域。

p5-myreads/src/Book.js

一点点小建议，由于更改书籍的状态需要异步请求，如果在更改状态时能为用户提供一些视觉上的反馈就更好啦

关于通过 CSS 添加一个加载动画，通过下面链接了解更多：
SpinKit | Simple CSS Spinners

第 27 行和第 31 行 option 的 value 值相同，建议尽量保持 value 值的唯一性，要不然设置时会有冲突覆盖的问题。

p5-myreads/src/SearchBooks.js

第 75 行，可以考虑为输入框添加一个 autoFocus 属性，这样就能够一打开搜索页输入焦点就在输入框啦。

<input
  autoFocus
  ...
/>

使用了第三方包 react-throttle 中的 Debounce React 组件对用户的输入做防抖，提升了性能，非常棒👏！！

同时，需要注意的是 react-throttle 并不成熟，在某些场景下还会报错（比如 input 是受控组件），它是依赖一个非常成熟的库 loadash，可以考虑使用 loadash 代替 react-throttle。

知识点：节流与防抖
节流与防抖都是优化高频率执行 js 代码的一种手段。那么它们有什么区别呢？

以这个搜索输入框 onChange 事件为例:

节流就是在指定时间内只触发一次 onChange 事件
防抖就是在用户输入频繁的情况，当空闲时间达到指定时间时，才触发一次 onChange 事件
不难看出，防抖更适合用户输入的场景，而节流更适合类似监听页面元素滚动的场景。

最后，分享个相关的不错的资源：节流和防抖的在线可视化演示

p5-myreads/src/BookShelf.js

对于只用 props 渲染 UI 的不保存状态的组件，建议考虑使用函数定义的无状态组件，未来的 React 版本会提供性能的提升👨‍🏫。

分享
举个例子🌰，我们来写一个无状态组件 Hello：

function Hello(props) {
  return <h1>Hello, {props.name}</h1>;
}

另外，了解更多可参考：

九个你忽略的 React 无状态组件的优势
React 文档：函数定义的无状态组件

鉴于ES6 中 class 的使用与原先并无实现原理上的差别，所以 demo 中未改写。
等到所有项目完成，将它们上线时，再进行 ES6 规范修改，并进行 Babel 编译和浏览器适配。

技巧 🌟
toBe()：相当于 === 比较。
toBeTruthy()：如果转换为布尔值，是否为 true。
一般我们在测试 字符串是否为空 或者 变量的值是否为null 时会使用 toBeTruthy() ；而当知道预期结果是一个布尔值时，推荐使用更具体、更安全的 toBe(true)。

例如此处的 hasClass() ，该方法返回的就是一个布尔值， 不用再次转化，所以更推荐使用 toBe(true)，你做的很棒！

参考 📚
如果你想要了解更多有关 toBe() 和 toBeTruthy() 的信息，可以查看下面的链接：

toBe(true) vs toBeTruthy() vs toBeTrue()