写点什么

React 学习总结

用户头像
pydata
关注
发布于: 2021 年 04 月 10 日
React 学习总结

随着 MVVM 模式下现代前端框架的兴起,Vue 和 React 作为两大现代前端框架代表热度一直不减,Vue 更是推出了 Vue3 继续革新,React 本身由于 Facebook 大厂背书,加上 React Native 跨平台的加持,其丰富的生态让开发者趋之若鹜。本文主要从 MVVM、React 和 VUE 的比较、React 使用注意要点、进阶理解等方面对 React 近期的学习进行总结,如果有不对的地方,欢迎指正。


1. 前言

为提前进入到现代前端框架大门,建议从理解 MVVM 开始,文章MVVM前端数据流框架精讲中对 MVVM 与响应式编程关系的比较可以更进一步加深对 MVVM 框架的理解,总的来说,MVVM 模式与传统 MVC 模式相比,通过引入 VM(ViewModel),简化了业务与界面的依赖,解决了数据频繁更新的问题,在 MVVM 中,MVVM 中的 View 不知道 Model 的存在,Model 和 ViewModel 也观察不到 View,降低了模块间的耦合性的同时,也提高了代码的可重用性。在理解 MVVM 后,对 Vue 和 React 进行了比较。具体情况如下:

2. Vue 和 React 的比较

经过比较 Vue 和 React,其相同点和差异如下:

2.1 相同点

① 使用虚拟 DOM

② 提供了响应式和组件化的视图组件

③ 基于插件化的编程,一切都是组件,组件实例之间可以嵌套

④ 每个组件都提供合理的钩子函数

⑤ 专注于核心库

2.2 不同点

① 数据流不同

数据绑定上,Vue 是双向的,React 是单向的,React 基于 JSX 编码,单向数据绑定,不能直接更新状态数据,必须通过 setState()更新指定数据,而 Vue 基于模板语法,双向数据绑定,可以直接更新数据。

② 模板管理不同:

Vue 所有模板使用的是类似 html,React 所有的模板使用的是 JavaScript 的语法扩展(JSX)。

③ 状态管理不同

Vue 状态管理,是由 data 属性在 Vue 对象中进行自动管理 React 状态管理,则是通过 setState 方法进行手动管理

④ MVVM 的模式对应关系不同

React 中:Model 对应组件的方法或生命周期函数中实现的业务逻辑和 this.state 中保存的本地数据,也可以放在 Reducer 和 Action 中。VM 对应组件中的 JSX,作为 VirtualDom 的语法糖,React 负责维护 Virtual DOM 以及对其进行 diff 运算,React-dom 会把 Virtual DOM 渲染成浏览器中的真实 DOMView 对应框架在浏览器中基于虚拟 DOM 生成的真实 DOM 以及书写的 CSS 绑定器对应 JSX 中的命令以及绑定的数据 Vue 中:VM 对应 new 出来的 vue 对象 V 对应实例化过程中指定的 el, Model 对应被控制的区域中需要用到的数据。另外一点,Vue 和 React 相比,最大的不同也是在 MVVM,Vue 可以看成是完整实现了 MVVM,而 React 部分实现了 MVVM(只实现了 VVM 或者 VC),需要搭配其他的组件可以灵活的实现 MVVM,当然 Vue 也可以。

3. React 使用注意要点

① setState 是异步的吗?

   setState 只在合成事件和钩子函数中是“异步”的(合成事件和钩子函数的调用顺序在更新之前),在原生事件和 setTimeout 中是同步的。

② React 中钩子函数整理

constructor(props, context):构造函数,在创建组件的时候调用一次。

componentWillMount():在组件 render 之前立即调用

componentDidMount():所有的组件(包括子组件)在 render 执行完之后立即调用,并且只会被调用一次。

componentWillReceiveProps(nextProps):在 props 被改变时被触发,初始化 render 时不调用;旧的属性还是可以通过 this.props 来获取,在这里通过调用 this.setState()来更新你的组件状态。

shouldComponentUpdate(nextProps, nextState): 发生重渲染时,在 render()函数调用前被调用的函数,当函数返回 false 时候,阻止接下来的 render()函数的调用,阻止组件重渲染,而返回 true 时,组件照常重渲染;该方法并不会在初始化渲染或当使用 forceUpdate()时被调用。

componentWillUpdate(nextProps, nextState):

getSnapshotBeforeUpdate(prevProps, prevState):

componentDidUpdate(prevProps, prevState):

componentWillUnmount():

componentDidCatch(error, info):

render():render 是一个 React 组件所必不可少的核心函数(上面的其它函数都不是必须的);render 里面不要修改 state。

③ React Hook 的按需加载

函数组件的副效应解决方案,用来为函数组件引入副效应,淡化生命周期的概念,方便用在函数组件中(函数组件中不好使用 this),复用简单。Hook 规则如下:

只在最顶层使用 Hook

只在 React 函数中使用 Hook

4. 进阶理解

正所谓太阳底下无新事,虽然前端框架发展异彩分层,其设计模式、数据结构和算法等内容却从未改变。与此同时,前端变革的意义又是非凡的,一方面,前端的很多设计模式是对历史后端开发中设计模式的复盘和推演,一步一步地探索着新的编程范式;另一方面,前端在对数据的管理过程中,从数据库设计反推前端界面设计,打通前后端数据模型设计,很多时候也是当下低代码实现的技术本质,为实现数字化转型铺平了道路。


扩展阅读/参考

好想用TypeScript+React hooks开发啊

介绍Redux三大核心概念

深入浅出现代Web编程

React组件设计实践总结05-状态管理

MVVM前端数据流框架精讲

redux三重境

redux和Vuex的对比

深入理解TypeScript

1.5万字CSS基础拾遗

发布于: 2021 年 04 月 10 日阅读数: 54
用户头像

pydata

关注

https://justpic.org 2017.12.19 加入

还未添加个人简介

评论

发布
暂无评论
React 学习总结