React 初识—— 四大特点

React的四大特点

image.png

视图层框架

1. React 是只负责显示的框架；

React 能把数据变成 DOM 显示出来，处理在 DOM 上触发的事件，把 DOM 事件再返回给数据

2. React 是一个声明式的框架；

只需要定义数据和 DOM 的对应关系，这样在数据变化的时候，DOM 会自动变化

3. React 是数据驱动的 DOM；

所谓数据驱动的 DOM就是数据发生了变化，DOM 会跟着变化，再用事件反馈给数据

以组件的方式开发

在日常开发中，推荐以组件的方式组织我们的项目结构；
另外 React 提供了 state 和 props 两个主要的属性
1）state 就是组件里面的 React 的数据【我们也可以称之为状态】
2）props 是用于父子组件通信的【子组件可以通过 props 拿到父组件的数据或方法】； React 组件间的数据传递方式是由上向下的；因此需要父组件在 props里把操作的方法传递给子组件，通过一种类似回调的方式让父组件的状态发生改变
除此之外， React 的组件是有生命周期的，一个组件从建立、到存在、最后到销毁的整个过程就是组件的生命周期；React 也为整个生命周期提供了灵活的节点，方便我们处理各种业务情节

JSX 表达式

我们可以通过 【JSX 表达式】处理数据和 DOM 之间的关系，而不需要操作 DOM
可以从以下三个方面理解 JSX：
1）JSX 是一种 JS 扩展的表达式
2）JSX 是带有逻辑的标记语法，有别于 HTML 模版
3）并且支持样式、逻辑表达式和事件

虚拟 DOM

React 中采用虚拟 DOM 的机制；即在只有在必要的时候才会去操作 DOM，通过减少低效的操作，来提升性能

1）在 React 中，我们会把定义好的JSX 标记最终转换为一个虚拟的 DOM，存在内存里，这是因为内存的整体速度要比操作 DOM 快的多

2）如果用户做了对DOM 可能产生影响的操作的时候，虚拟DOM 会把操作前后的数据进行对比，如果操作前后的数据有变化，就会把所有的变动然后统一操作一次 DOM ，如果发现操作前后的数据没有差异的话，就不会再去操作 DOM了；虚拟DOM 的思路就是不到万不得已就不去做低效的 DOM 操作

3）虚拟DOM 有两大优势
1】一个是操作 DOM 前对数据进行对比，只有数据变化的时候才去操作DOM
2】它会整合 DOM 操作，可以减少 DOM 操作，提升性能

React 整体优点总结

1.简洁

在当业务流程复杂的时候，我们就会发现单向数据流和组件化的组合方式会很大程度上降低问题的复杂度

2.灵活

在 React 里，我们可以把一切理解为 JS，这样操作起来就少了很多束缚；另外组件提供的多种嵌套方式，数据驱动、生命周期等让开发变得更加顺畅

3.高效

这离不开我们刚才的虚拟 DOM，它通过减少和优化 对DOM 的操作，能在 React 在浏览器里有更好的性能表现

React 的 缺陷：

1. React 只是 视图层的一个框架，如果需要做其他事情，需要依赖它的生态系统；如处理单页面路由使用 Router,处理数据使用 Redux
2. 变动频繁，经常不向前兼容