认识React，了解React

偏执的太偏执、 2022-09-11 11:17 214阅读 0赞

# 一、React简介 #

1、React是一个用于构建用户界面的JavaScript库。  
2、React起源于Facebook的内部项目，用来建设Instagram的网站  
3、React不是一个完整的MVC框架，最多可认为是MVC中的V（View）  
4、React是构建用于可重复调用的web组件，侧重于UI，也就是View层  
5、React拥有较高的性能，代码逻辑非常简单  
6、React是单向的从数据到视图的渲染，非双向数据绑定

# 二、React的特点 #

## 1、声明式设计： ##

1)、命令式开发：原生js和jq写代码的时候，大部分都是在操作DOM，这种开发模式就是命令式开发。
    2)、声明式开发：react是面向数据编程，不需要直接去控制dom，你只要把数据操作好，react自己回去帮你操作dom，可以节省很多操作dom的代码，这就是声明式开发。

## 2、可以与其他框架并存（灵活） ##

react所控制的dom就是id为root的dom，页面上的其他dom元素也可以使用jq等其他框架。

## 3、高效（虚拟DOM，高效速度快，跨浏览器兼容） ##

1）react操作的是Virtual DOM （虚拟dom），最大限度地减少与dom的交互
    2）虚拟dom：Virtual DOM 顾名思义不是真实的DOM，它不需要浏览器的DOM API支持。虚拟DOM是在DOM的基础上建立一个抽象层，其实质是一个JavaScript对象，当数据和状态发生了变化，都会被自动高效的同步到虚拟DOM中，最后再将仅变化的部分同步到DOM中。

## 4、组件化 ##

通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

## 5、单向数据流 ##

React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
    1）react是单向数据流，父组件传递给子组件的数据，子组件能够使用，但是不能直接通过this.props修改，会报错（cannot assign to read only property ‘xxx’ of object ‘#object’）
    2）子组件要传值给父组件，或者要修改父组件的代码，都要通过父组件传递过来的方法去实现
    3）这样的好处在于，让数据清晰代码容易维护。

## 6、react是视图层框架 ##

如果是大型项目，非常多的子组件，要修改一个公共的参数，就需要很多层的传递才能完成一个数据变更。
    单单react去做大型项目是不够的，他优势在于视图层的渲染，涉及到复杂的数据传递，还需要结合其他数据层的框架开发。如mox-box，redux。

## 7、函数式编程 ##

react项目中大部分都是函数，连html都是由render函数去实现的。
    他的优势在于，方便代码维护，复杂的函数可以拆分成多个函数。
    在前端自动化测试是也很方便，只需要给函数一个参数，看他输出就可以了。

## 8、JSX ##

JSX是JavaScript语法的扩展。
    react使用JSX来替代常规的JavaScript。
    JSX是一个看起来很像XML的JavaScript语法扩展。
    JSX的优点：
    	1.JSX执行更快，因为它在编译为JavaScript代码后进行了优化。
    	2.它是类型安全的，在编译过程中就能发现问题。
    	3.使用JSX编写模板更加简单快速。