React生态圈

介绍一些平时用到的仓库，做react项目事半功倍

好文链接

• 5 React Architecture Best Practices: 一个老外团队对于react的最佳实践总结，提了5点，涉及到代码管理、css样式导出、高阶组件的使用、用方法当子元素、设置Render Props，项目大了以后这几条都蛮有用的。
• Tips to learn React + Redux in 2018: 学习react和redux的一篇好文，从基础的说起，一直到最后，还介绍了很多现在好用的框架，以及何时使用这些框架。做项目架构，遇到瓶颈了，可以一看。
• React Patterns: react设计范式，类似于工具书，说的非常全了，系统学习非常适合。

用到的仓库

• React: 只关注UI渲染，16^版本有了大改动，去掉了几个生命周期的回调，变成了静态方法。17版以后会彻底移除。
• Redux: 状态记录，通过action修改reducer中的状态，原生API用起来比较复杂，有很多辅助包来处理额外问题。
  -- reduxjs/react-redux: 官方维护的桥接工具
  -- reduxjs/reselect: 把state中的数据重新筛选一次，使用的时候更方便。
  -- ​redux-saga/redux-saga: 复杂的异步逻辑处理非常适合，业务逻辑解耦。
  -- ReactTraining/react-router-redux: 将router状态绑定到redux中，对于一些需要直接读路由状态的控件会方便很多。
• React-Router: 为单页应用提供了路由功能，用url控制页面显示状态。
• Styled-Components: 自带样式的组件，使用template模式编写css，方便css的样式导出，做组件库非常方便，不过css的选择器用不了了，会有冗余代码。

用到的工具

• Webpack: 打包工具，前端框架编程必备，模块化编程，各种plugin、loader需要配置。
• Babel: 转码工具，提前使用起ES6语法，解决在低端版本浏览器上的兼容问题。学习了解preset的内容，配置起来会愈发的轻松。
• react-devtools: React的调试工具，chrome上的插件。
• redux-devtools-extension: Redux调试工具，也是chrome上的插件。