为什么选择使用 react 框架来做项目？

电玩女神 2024-04-17 15:33 74阅读 0赞

**主要原因**是因为前期我们交接的项目一直使用“”三无框架“”，无测试用例，无充分论证，无人维护，导致我们的项目开发效率，维护效率低；**而** react 的组件化，单项数据流，Virtual Dom 及增量跟新，生态圈大，JSX , Learn Once , Write Everywhere 等特性刚好可以弥补我们项目的劣势.

--------------------

在项目中 react 可以通过构建工具，统一状态管理，开发效率提升，路由控制器这四大方面更好的**实现功能**.  
**第一**：是构建工具，gulp + webpack,在这主要是要区分开开发和生产环境以及兼容性.  
**第二**：是统一状态管理，redux ，它最大的优势是集中管理；记录历史，store 中同时保存状态和改变状态的逻辑；便于扩展.  
**第三**：是开发效率提升，react-hot-loader 搭配 webpack.HotModuleReplacementPlugin使用；  
**第四**：是路由器控制，react-router 路由表 Single Page Application.

--------------------

react 的**优化**对我们的项目也是很好的提升，  
**第一**：状态/数据管理优化，新旧数据都是独立的拷贝，对于类似抽奖之类的项目，多个 reducers 处理同一个 action ，一个 reducer 的数据依赖与另一个；  
**第二**：渲染性能优化，  
**第三**：首屏性能优化.

--------------------

在**状态管理数据**时，  
**第一**：数据扁平化.  
**第二**：新旧数据都应该是独立的拷贝.  
**第三**：多个reducers处理同一个action  
**第四**： 一个reducer的数据依赖于另外一个，Reselect 若数据不变，能帮助缓存

--------------------

在**渲染**时，react 大部份性能问题都归因于重复渲染，如果我在每个 component 的 render 里，放一个console.log(“xxx component”)，然后触发一个action，若几乎全部的component都打出这个log，可以直观看出重复渲染，表明重复渲染比较严重  
**针对**长列表滚动，我们经常出现卡顿的问题，如家校群列表，react 的shouldComponentUpDate生命默认返回 true，表示要求组件更新，若返回 false ，则不更新  
**针对**其他渲染性能优化：  
*方法一*：使用 redux-immutable + immutable  
*方法二*：使用 lodash.merge + non-immutable-pureRender  
**针对**其他小Tips，  
*方法一*：慎用setState，因其容易导致重新渲染  
*方法二*：将方法的bind一律置于constructor  
*方法三*：只传递component需要的props，避免其它props变化导致重新渲染  
*方法四*：尽量使用const element

--------------------

在**首屏渲染**时，react 对比其它框架并无优势  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70]  
**针对**有 cgi 请求，需要吐大量数据的页面，我们采用【同构直出】，它还是有几点值得说明，比改造以前的项目，做直出更容易，减少的是首屏显示时间，而非首屏可交互时间，页面吐出 html 字符串之后，还需要在客户端加载react包，进行事件绑定，做 bigPipe 之类的优化较难，考虑好页面的 PV 与服务器的负载，

> cgi 是什么？web 服务器所处理的内容都是静态的，通过cgi协议，再结合已搭建好的 web 应用程序，如php、jsp、python、perl等，就可以让web server也能"处理"动态请求

[简单版的cgi工作方式][cgi]  
![简单版的cgi工作方式][cgi 1]

> 同构直出是什么？通常，当客户端请求一个包含React组件页面的时候，服务端首先响应输出这个页面，客户端和服务端有了第一次交互。然后，如果加载组件的过程需要向服务端发出Ajax请求等，客户端和服务端又进行了一次交互，这样，耗时相对较长。  
> react 同构直出就是用来解决这个问题的，做到秒开页面，就是服务端可以在页面初次加载时把所有方面渲染好再一次性响应给客户端

**针对**没 cgi 拉取，但包较大的，我们采用【拆包】，如家校群  
**针对**非基础功能，如运营活动，我们采用【轻量化】类 react 方案  
简单总结：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/70dac66737f94337a53161c9c2125c1d.png
[cgi]: https://www.cnblogs.com/f-ck-need-u/p/7627035.html
[cgi 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/9005dcfb16db4b7e84b89621e7399171.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/2237ba8d7d894b70be10ff0da9db8e0c.png