React 基础笔记(简介和特点)(一)

React 简介

1. react 发展 –Facebook 在构建 instagram 网站的时候遇见两个问题

2. 数据绑定的时候，大量操作真实 DOM，性能成本太高

3. 网站的数据流向太混乱,不好控制.

React 把用户界面抽象成一个个组件，如按钮组件 Button、对话框组件 Dialog、日期组件 Calendar。开发者通过组合这些组件，最终得到功能丰富、可交互的页面。通过引入 JSX 语法，复用组件变得非常容易，同时也能保证组件结构清晰。有了组件这层抽象，React 把代码和真实渲染目标隔离开来，除了可以在浏览器端渲染到 DOM 来开发网页外，还能用于开发原生移动应用

React 特点

• 声明式设计 – React 采用声明范式,可以轻松描述应用(自动 dom 操作)

• 高效 – React 通过对 DOM 的模拟(虚拟 DOM),最大限度的减少与 DOM 的交互

• 灵活 – React 可以与已知的库或者框架很好的配合

• (重点)JSX – JSX 是 javascript 语法的拓展

• (重点)组件 – 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发

• (重点)单向响应的数据流 – React 实现了单向相应的数据流,从而减少了重复代码,这也是它比传统的数据绑定更简单

React 的精髓是函数式编程,React 的核心是组件,组件的设计目的是提高代码复用率，降低测试难度和代码复杂度.

React 操作原理

• 传统 DOM 更新

在传统页面的开发模式中,每次需要更新页面时,都要手动操作 DOM 来更新

• 虚拟 DOM 更新

DOM 操作非常昂贵,前端性能开发中性能消耗最大的就是 DOM 操作,而这一部分会让整体项目的代码变得难以维护.React 把真实 DOM 树转换成 JS 对象树也就是虚拟 DOM 存在

React 函数式编程

他的主要思想就是把运算过程尽量写成一系列嵌套的函数调用

函数的编程好处

1. 代码简洁,快速开发
2. 方便的代码管理
3. 代码的热升级

React JSX 语法的由来

JSX 将 HTML 语法直接加入到 JS 代码中,通过翻译器转换到纯 JS 后，由浏览器执行。实际开发中 JSX 在产品打包阶段都已经编译成纯 JS，反而让代码更加直观易于维护

1. 编译过程由 Babel 的 JSX 编译器来实现

2. JSX 的官方定义是类 XML 语法的 ECMAscript 扩展

3. 组件就是一个集合体,就是把 html,js,css 放在一期形成一个组件,组件的写法就是 jsx 语法编写

React 事件机制

• 函数声明需要与 render 函数同级,因为在 react.creatClass 传入的是对象,声明的函数也是一个对象,是 React 对象对外暴露的原型链,render 会计算 return 方法,同样计算同级的方法

• 直接写事件机制 onClick={this.函数名}

• 将函数变量封装到全局变量中

• 原型链写法

• 在 jsx 中写逻辑 - 要写在 render 和 return 之间

• 注释的标签方法是

{/* */}

• 组件嵌套不能多个节点渲染，否则最后一个组件覆盖前面的。