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. 进阶理解
正所谓太阳底下无新事，虽然前端框架发展异彩分层，其设计模式、数据结构和算法等内容却从未改变。与此同时，前端变革的意义又是非凡的，一方面，前端的很多设计模式是对历史后端开发中设计模式的复盘和推演，一步一步地探索着新的编程范式；另一方面，前端在对数据的管理过程中，从数据库设计反推前端界面设计，打通前后端数据模型设计，很多时候也是当下低代码实现的技术本质，为实现数字化转型铺平了道路。
扩展阅读/参考
版权声明: 本文为 InfoQ 作者【pydata】的原创文章。
原文链接:【http://xie.infoq.cn/article/96d405e673dad661eabf2ef6e】。文章转载请联系作者。
https://justpic.org 2017.12.19 加入
还未添加个人简介
评论