作为老司机使用 React 总结的 11 个经验教训

作为一位资深开发者，我通过多年的经验，总结出使用React的11个经验教训。希望这些经验能为初学者和资深开发者提供有价值的参考。

我想强调的是，作为一个有着十八年编程经验，其中十三年全职专业的开发者，我对React有着深厚的感情。在我六年的Flash开发生涯中，当Steve Jobs宣布不支持Flash时，我开始接触并爱上了React。从那时起，我就一直在学习和使用React，积累了大量的经验和教训。

接下来，我想分享一些我认为非常重要的经验教训：

一、组件设计原则

在React开发中，多个简单组件往往比一个高度定制化的组件更好。我们可以通过传递不同的props来改变组件的行为，这是一种非常有用的功能。在项目初期，养成创建通用组件的习惯，可以使我们的代码更易于维护和复用。避免在一个组件上不断扩展，以减少修复bug的时间和精力。如果一个组合组件导致了bug，最好将其分解成更简单的组件，即使这意味着一些代码重复。

二、回馈社区

当我们使用开源软件和React库时，可能会遇到一些bug。如果发现了bug，我们应该及时向社区反馈。更好的做法是，如果我们能修复某个bug，那么一定要提交Pull Request，将修复的代码整合进库中。这样做不仅能使我们的开发体验更好，也能使整个开源生态变得更好。回馈社区，即使只是修正文档中的拼写错误也是有价值的。

三、适应现有项目

如果在现有的项目中引入React，最好先进行一次build过程，以确保所有的依赖项都能正确编译和链接。我曾经在一个Backbone项目中实现React组件，通过Browserify或Webpack进行编译和通信。对于在一个现有项目中应用React的情况，走一遍build过程是非常有必要的。

四、数据可视化策略

对于简单的数据可视化需求，使用原生SVG可能是一个更好的选择。D3是一个非常强大的数据可视化库，但在某些情况下，使用原生SVG可能更加简洁高效。学习一些SVG的基础知识，足以满足大多数简单的数据可视化需求。

五、项目时间管理

如果项目期限只有两周，保持功能精简是很重要的。对于简单的渲染任务，React和React-DOM就足够了。在时间短促的情况下，使用Redux可能会过于复杂和耗时。通过传递props和callback来实现简单的状态管理是一个更好的选择。模板项目可以帮助我们快速启动并保持项目精简。

六、优化性能的关键

依赖于CSS动画来移动元素可能会导致性能问题。在某些情况下，尤其是处理大量元素时，我们可能会遇到帧速率下降的问题。为了优化性能，我们应该充分利用React的虚拟DOM技术，并确保只在必要时进行渲染和重渲染。这意味着我们应该只渲染那些在视图窗口中的组件。为了应对性能问题，建议在低配机器上进行测试，并测试边界数据以查看程序在受限条件下的表现。

以上就是我在使用React过程中的一些经验教训。希望这些经验能帮助你在React的道路上更加顺利地前行。从研究模板开始：开启你的学习之旅

新领域或学习新技能时，一个好的起点就是模板项目。尤其是当你所在的公司拥有自己设计的模板时，这将大大加速你的启动过程。模板项目并非万能解决方案。它们往往提供的只是基础框架，实际的工作需求往往更为复杂多变。如果你不熟悉模板项目的特性，那么后期可能需要花费大量时间去重构已经存在的功能。我鼓励你充分利用模板项目的快速启动优势，但同时也要敢于对其进行重构，使其更符合你的实际需求。

关于组件、connected组件和容器的管理

在使用Redux进行开发时，管理和组织你的组件至关重要。为了保持代码的清晰和可维护性，应限制组件的数量，并努力保证actions/reducers的复用性。组件应仅依赖于自身的props，而connected组件则通过Redux访问应用数据，并只负责渲染自身的DOM和子组件。容器则充当数据获取和组件渲染的协调者。为了确保代码的可读性和一致性，应注意保持命名和功能的一致性。

代码检查的双刃剑

代码检查是一把双刃剑。适当的代码检查可以提高代码质量，帮助我们发现潜在的错误，如常量分配和书写错误，甚至是一些常见的运行时错误。过于严格的代码检查可能会阻碍开发进度，使开发者过于关注细节而忽略了更重要的逻辑问题。拥抱团队的代码审查规则是必要的，同时也要注意平衡，确保代码检查既能提高代码质量，又不会过度影响开发效率。

React在Express项目中的渲染

在Express项目中进行React渲染是完全可行的。通过ReactDOMServer，你可以将React组件作为页面片段传递给模板进行渲染。这种方法在多页面Express应用中特别有用，可以让你在保持服务端渲染优势的利用React的组件化特性。

关于Saga的困惑

Saga是Redux中的一种中间件，基于ES6的生成器特性。它的工作原理与传统的JavaScript工作流程有所不同，能够在基于Promise的代码执行过程中暂停和恢复。对于初学者来说，Saga可能会让人感到困惑。但如果先理解Promise和Generator，那么学习Saga的过程会相对容易一些。

以上是我学习React以来的一些经验和心得。过去的一年里，我接触到了不同类型的项目，也学到了很多新知识。我期待着未来的日子继续新事物，如React Native等。如果你在阅读本文后能有所收获，那将是我最大的荣幸。如果你在阅读过程中有任何疑问或建议，欢迎随时与我交流。我最近正在撰写一本关于React.js的书籍，对React.js感兴趣的读者可以期待一下。希望这篇文章能对你有所帮助，祝你在学习React的道路上越走越远！