认识React,了解React 偏执的太偏执、 2022-09-11 11:17 139阅读 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编写模板更加简单快速。
还没有评论,来说两句吧...