React出现的意义及设计理念

传统开发框架存在的问题

  • Jquery式的开发框架采用命令式的编程范式 需要关注DOM的细节
  • 数据变化后 UI的同步变得非常困难
  • 大量的API增加学习成本 降低了开发效率
  • 数据模型中Model与View之间复杂的依赖关系

React设计理念

  • 采用函数式编程范式 应用的每一个状态对应一个页面的UI 不需要关注DOM细节
  • 每次生成的Virtual DOM 都是全量渲染 不需要区分是否是更新状态
  • 组件化思想 将整个页面抽象成一个组件 组件之间的相互嵌套组成了整个页面
  • 极少的API和声明周期函数 理解了这些就可以进行应用的开发
  • 采用Flux架构,单项数据流 保证了每次数据变化都是可追踪的

React 使用JSX将HTML和JS混合在一起?

首先将html和js分成不同文件只是将他们分开管理而并非在逻辑上“分而治之”
React的组件作为一个完成特定功能的组件具有高内聚的特性是极为重要的
而且在React中使用onClick是完全区别于在html中使用onclick

在html中使用onclick有什么缺点呢?

  1. onclick添加的事件处理函数是在全局环境下执行的,这会污染全局环境,造成意想不到的后果
  2. 给DOM添加事件处理函数 会降低程序的性能
  3. DOM销毁的时候绑定的事件处理函数需要被手动销毁,忘记销毁可能会产生内存泄漏

以上的几个问题在JSX中是不存在的

  1. JSX中的onClick使用的是事件委托的方式 只在最外层的DOM上注册一个事件处理函数 所有点击事件都触发这一个函数 然后根据组件来分配特定的函数
  2. React的组件控制着生命周期 当组件销毁的时候 所有注册的事件处理函数也随之销毁