发现一本还不错的 react 相关的书，《React 设计模式与最佳实践》，第一版是 18 年 8 月份的，比较新，目测适合入门和巩固 React 开发的人，更加全面的了解 React 的开发，不涉及到源码解读等。这里记录一下阅读后我不熟悉的或值得记录的点。
JSX
jsx 中插入多空格
<div>a{" "}b{" "}c</div>
条件渲染
很多时候需要根据条件判断是否需要渲染某个组件，常常我们会这样写：
1 | <div>{dataIsReady && (isAdmin || userHasPermissions) && <SecretData />}</div> |
如果条件比较复杂，可以抽离出判断规则为一个方法： this.isRender && <SecretData />。
为了保证组件的纯净，可以使用 react-only-if 这个库，能够快速的创建出根据条件渲染的高阶组件。
展开属性
属性可以直接传入一个展开的对象，不用一个一个对应再写一遍 <button {...props} />
getter
age(){} => get age()，使用的时候可以省略括号，相当于一个值，可以类比为 vue 中的计算属性。
动画
推荐一个库react-transition-group，能够更方便的控制多个状态。
性能优化
环境
用 webpack 打包的时候区分好生产环境和开发环境。
函数式组件
该类型组件没有实例化过程，所以没有自己的生命周期和状态，适合用来构建大型的组件，因为耦合度更低。多使用函数式组件能够让思路更清晰。
手动控制组件更新
合理使用 shouldComponentUpdate() 方法和 PureComponent 组件，减少没必要的组件更新。
props 常量对象
将一个常量对象作为 props 时最好在外部创建，通过引用传入，而不是在属性上创建，同理绑定 props 方法时也是这样。这样能够避免每次 update 都重复创建，以及在循环中重复创建。
bad:
1 | <Com status={[1: 'a', 2: 'b']} /> |
good:
1 | <Com status={this.status} /> |
代码风格
强烈建议项目中加入 eslint 等代码风格检查工具，配合 ide 插件能够实时提醒，保证多人开发的时候看到的代码是一致的。另外推荐 prettier，一个代码自动格式化工具，eslint 虽然提示了，但是自己手动修改也是麻烦，该库能够根据 eslint 配置或者个人配置自动格式化代码，完美搭档。
函数式编程
我个人的理解是运用柯里化、组合、链式调用等技巧写出没有副作用、简单明了、易于维护的代码。而 es6 可以很方便的实现这几个技巧。
CSS
CSS 是前端开发无法避免的话题，文中提到几个 css 写法：Css in JavaScript、 style、 Radium，其实这三个都是都是行内样式的写法，实际开发时并不推荐，样式不好复用，相当于阉割版 css，无法使用 less/scss 等优秀的预处理器。个人觉得最合适的还是 CSS Module，灵活，纯正。
服务端渲染
一直没有去尝试做这个，服务端渲染技术能够改善 SEO 和首屏加载速度，因为首屏页面是在服务端进行的，而不是浏览器端，这样页面能够更快速的呈现。实现需要后端配合。
测试与调试
目前我都没有在项目中写个测试，对于 react 组件，测试写起来比较繁琐，而且变化也很频繁，的确让人容易怯步，后续可以考虑一下，或许需要重新审视一下测试。
react 调试比较有用的是 react-devtools 和 redux-devtools，前者调试组件，后者调试 redux