React前端项目技术选型、开发工具、周边生态
时间：2023-03-31 11:49:34
CSS
react前端项目技术选型、开发工具、周边生态声明：本文不是介绍React基础知识的文章，需要熟悉React相关知识主要架构：react,react-router,redux,redux-thunk,redux-saga,react-redux,dva,umi扩展架构：styled-components,recompose,react-loadableUI框架：ant-design,ant-design-mobile,material-ui,Semantic-UI-React,blueprint,react-bootstrap服务器渲染：next.js,razzle,react-server,beidou开发工具：storybook,react-devtools,redux-devtools,redux-devtools-extension测试:enzyme,react-testing-library,jest替代库:preact,inferno插件库:react-motion,react-select,reselect,react-beautiful-dnd,react-canvas,redux-form,recharts,react-dnd，反应头盔1。架构选择Evolution如果页面比较简单，只能用react。如果需要本地路由功能，比如在单页应用（SPA）中维护多个页面，并且可以在本地控制路由跳转逻辑，就需要使用react-router。复杂的页面会遇到一些问题：组件之间的通信问题（比如A组件要改变B组件的状态），跨组件的数据存储和共享问题（比如多页购物车数据存储）。React本身并不能很好的解决这个问题。它需要与redux一起使用。Redux本身只是实现了flux的概念和一些基本的功能，但是在使用中，还需要扩展一些功能，比如异步调度action。这时候可以选择配合使用redux-thunk来解决异步派发action的问题。另外，我也选择了redux-saga，但是redux-saga不仅异步调度action，还有强大的异步数据流处理功能，几乎改变了整个redux的使用方式。这是一个重量级人物。如果是大而复杂的项目，建议使用redux-sagaredux本身是不绑定react的，redux配合vue、angular等其他框架还是可以的。为了让redux和react的开发更顺畅，可以使用react-redux将两者联动起来，这样开发体验更好。在大型项目中使用上述架构时，会使项目极其复杂且不可控（如目录结构、action定义方法等），这时就需要使用dva来简化数据流操作，减少项目的复杂性。以上是代码级架构。如果配合umi使用，将会有更好的开发体验。umi内部使用roadhog（webpack打包库），动态路由，自动加载dva模型，通过插件支持PWA（ProgressiveWebApp），以路由为单位进行代码拆分等。总结：简单页面直接使用react，如果需要本地路由功能加上react-router，如果需要跨组件通信和共享数据，对于不太复杂的页面可以使用redux+redux-thunk，对于复杂的大型应用（例如，整个项目是一个单页面应用），可以使用react+react-router+redux+redux-saga+react-redux+dva+umi2。一些扩展的可选架构2.1styled-components使用styled-components，可以将css样式代码写入js文件。一般来说，写一个react组件需要以下结构：-ComponentA.js-ComponentA.css-ComponentB.js-ComponentB.css-...#ComponentA.css.container{padding:10px;}#ComponentA.jsimportstylesfrom'./ComponentA.css';导出默认道具=>({props.children}
);使用styled-components后，您可以删除css文件：-ComponentA.js-ComponentB.js-...#ComponentA.jsimportstyledfrom'styled-components';constContainer=styled.div`padding:10px;`;exportdefaultprops=>(
{props.children});2.2recompose写了大量的react组件后（尤其是使用redux+react-redux后，组件的state被剥离出来了），我觉得用classdeclarative（类）写reactcomponents的方式不是最好的，用functionalcomponents会更好：functionalcomponents的逻辑更清晰，避免state被滥用扩展React.Component{constructor(props){super(props);this.state={counter:0,};}setCounter(cb){const{counter}=这个。状态;setState({计数器:cb(计数器),});}任der(){const{counter}=this.state;constsetCounter=this.setCounter;return(
Count:{counter}setCounter(n=>n+1)}>增量setCounter(n=>n-1)}>递减
);}}函数式写法：import{withState}from'recompose'constenhance=withState('counter','setCounter',0)constCounter=enhance(({counter,setCounter})=>
Count:{counter}setCounter(n=>n+1)}>递增setCounter(n=>n-1)}>递减
)相比之下，函数式的写法清晰多了更多参考：通过Recompose库掌握React功能组件2.3react-loadable有时候，我们希望动态加载一些组件（按需加载），比如在单页应用中：-pages-PageA.js#一个页面组件-PageB.js#b页面的组件-PageC.js#c页面的组件-...只有当当前页面真正实例化时，才会加载相应的组件。使用react-loadable封装原始组件，然后使用封装后的组件，就像使用原始组件一样，react-loadable会自动为我们处理脚本加载。从'react-loadable'导入可加载；从'./loading-component'导入加载；#当页面组件没有加载成功时，显示一个加载组件constLoadableComponent=Loadable({loader:()=>import('./real-component-a'),#动态加载真正的A组件loading:Loading,});exportdefaultclassComponentAextendsReact.Component{#封装后的组件使用方法和原来一样render(){return
;}}3。选择UI框架使用现成的UI框架，可以少写很多代码。目前推荐的有：ant-design+ant-design-mobile：蚂蚁金服出品的material-ui：googlematerialdesign的实现Semantic-UI-React：Semantic-UIforreactblueprint：一套易用的-使用移动端UIFramework4.服务端渲染Next.js是服务端渲染用的最多的，其他的还有razzle、react-server、beidou。一般这些框架都会对目录结构、书写风格、组件集成、项目构建等有一些要求，自定义属性可能不是很强。以next.js为例，整个应用中没有html文件，所有的响应html都是由node动态渲染的，包括meta信息、css、js路径等。在渲染过程中，next.js会渲染所有首页的组件按照路由转成html，其余页面会保留原组件的格式在客户端渲染。更多参考：详解后端模板渲染、客户端渲染、节点中间层、服务端渲染（ssr）五、开发工具开发过程中使用的主要工具。5.1storybookStorybook为组件开发搭建了一个强大的开发环境，并提供了以下功能：提供了强大的UI组件管理页面，可以方便清晰的对多个组件或一个组件的多个组件进行分组和管理除了自动化交互测试，不同状态可以很容易地用于手动交互测试，组件参数可以动态改变。查看视图变化可以将组件预览导出为静态资源，方便查看组件文档和对应不同的参数。还有一系列针对不同视图的插件，提供很多附加功能，帮助您更好地开发、测试和优化组件社区。已经有很多使用storybook开发的组件库，比如：react-dates的storybookreact-dates-storybookreact-native-web的storybookreact-native-web-storybook更多参考：react,vue组件开发工具：storybook5。2react-devtools这是一个专门为react组件开发的chrome开发者工具插件，就像开发者工具Elements一样，可以查看整个页面的react组件树以及各个组件的属性和状态，并且可以动态的更改属性和状态，然后更新应用程序的UI。通过chrome应用商店安装chrome-react-developer-tools。其他安装方法见react-devtools.5.3redux-devtools和redux-devtools-extension这是一个专门为redux开发的chrome开发者工具插件，和react-devtools一样，可以查看整个页面的reduxstore和它的更改，并动态调度操作，然后将UI更新到应用程序。5.3.1安装redux-devtools这种安装方式会将redux-devtools嵌入到页面中，成为页面的一部分。npminstall--save-devredux-devtools#也可以安装npminstall--save-devredux-devtools-log-monitornpminstall--save-devredux-devtools-dock-monitor更多信息参考redux-devtools-Walkthrough.5.3.2安装redux-devtools-extension这种安装方式是浏览器开发者工具的插件。通过chrome应用商店安装chrome-redux-devtools。其他安装方式见redux-devtools-extension。6.测试一般的react组件，会用到enzyme+jest，jest用来测试JavaScript，enzyme用来测试react组件。此外，您可以使用react-testing-library代替react-dom/test-utils以获得更好的测试体验。7.备选库如果你对组件性能和虚拟DOM算法有极致追求，可以试试react的备选库，比如：preactinferno8。插件库一些非常有用的插件库：react-motion：动画组件react-select：下拉选择组件reselect：redux的路径选择器react-beautiful-dnd：拖放组件react-canvas：canvas组件redux-form：redux和formbindingrecharts：D3的react包react-dnd：又一个拖拽式组件react-helmet：documenthead区域经理更多后续博文见https://github.com/senntyou/blogs作者：沈玉之(@senntyou)版权声明：免费转载-非商业-非衍生-保留署名（创意共享3.0许可）
