React最佳实践？看看Facebook员工写的这本书能让你学到什么？

对你来说，这是篇阅读指南，关于《React设计模式与最佳实践》这本书。

对我来说，这是我的读书笔记。

我为什么写这篇文章？

图灵社区有一个「电子书阅读奖励计划」：

买书30日之内，看完，并在公共平台发表心得、评价、思索、疑惑等等。

奖励等值电子书代金劵。

所以我是来拿奖励的。

接下来，我会：

1. 客观地描述这本书讲了什么？以什么方式讲的？
2. 主观地谈谈我从《React设计模式与最佳实践》中的收获

通过我的表达，如果你觉得这本书能给你带来提升，你也可以买一本看看。

链接：图灵社区《React设计模式与最佳实践》

你为什么要看这本书？

入门React框架并不难，简单地阅读入门文档，然后跟着官方的tutorial项目走一遍，就基本可以上手使用了。

但是，

上手 !== 会。

你还不能灵活的使用

我是开始实习的时候接触的react，用两天时间简单学了React（做了官方的tutorial项目），当然还不能干活，又学了三天meteor，redux全家桶，styled-components，ant-design，第二个星期进了项目。

这时候能干活了吗？能，分给我一个模块。因为是一个管理系统，所以有些地方不明白可以参考其他模块的代码，照猫画虎，跌跌撞撞，还真把一个模块的页面给写完了。

但是也仅限于能写出来。

问问你自己：

• 代码为什么这么写？
• 组件为什么这么用？
• 没有参照你自己能写出来嘛？
• React框架带来了什么提升？

你说不清楚的。

你还不能用的优雅

如果你觉得自己已经能够灵活地使用，那么：

• 你知道背后的原理吗？
• 你敢保证自己的代码质量吗？
• 你知道怎么优化你的应用吗？
• 你觉得你的项目的开发效率和可靠性够高吗？

如果这些问题你都没有头绪，或者不能给自己一个肯定的答案，那么这就是你看这本书的理由。

这本书讲了什么？

书名讲的很清楚，设计模式与最佳实践。

这本书可以分成三部分：

1. 提升代码质量（代码风格，可复用性高的组件，合理的使用方式）
2. React生态中的一些指向性建议（如何生成文档，React如何写样式，React应用的服务端渲染。）
3. 一个完善的开发模式（代码风格->高可复用的组件->各种功能（表单，样式）的解决方案->提升性能->性能监控->测试）

可以说，涉及到了React开发与应用的各个方面。

怎么讲的？

本书讲述的风格是：

先通过一个不完美的例子，分析它，找出问题。

然后讲述背后的原理是如何解决这个问题的。

然后用一种优雅的方式，解决这个问题。

但是并没有极其深入某项技术。比如讲测试，只讲了如何写测试用例，给了几个例子，让你认识到React测试怎么写，需要注意哪些点，然后讲了一些比较好的库（jest）的基本用法。

但是我觉得讲的全面但不深入对于这本书来说是有必要的，因为本书的目的是：

让你知道React的设计模式应该有哪些东西，这些东西能够解决什么问题，以及如何解决的。

读完本书之后，需要你根据本书的指导，再进一步的深入各个环节的细节。

我的收获

我知道了什么是高质量的React组件：

• 逻辑抽象合理（一个组件应该只负责一个抽象意义上的功能）
• 接口设计清晰（准确的Proptypes）
• 清晰的文档（通过react-docgen和storybook自动生成）
• 合理的数据流（数据来源清晰，状态存储在合理的位置）
• 优化过的性能（用纯组件、不可突变、shouldComponentUpdate、合理的使用state，避免不必要的渲染）
• 完善的自动化测试用例
• 高阶组件（通过对逻辑的封装提升通用性）

我知道了如何通过合理的设计模式提高项目的开发效率（质量和速度的提升）：

• 优雅的代码风格

• 清晰的文档

• 高可复用的组件

• 性能监控与性能优化

• 完善的测试

• 服务端渲染的作用以及解决思路

当然，我所说的知道仅仅是知道，目前还没有深入的了解和足够的实践。

但这就是我读完本书后，需要继续学习的地方。

转载于:https://juejin.im/post/5ba115866fb9a05cea7f8161