简介
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MV* 框架,都不满意,就决定自己写一套,用来架设 Instagram 照片墙 的网站(17年 用户量7亿+)。做出来以后,发现这套东西很好用,就在2013年5月开源了。
所以react也是当下很火的一个框架
那么react和vue有啥区别呢?
共同点:
模块化:从代码的角度来进行分析的;封装【逻辑】代码,便于项目的维护和开发
组件化:从 UI 界面的角度来进行分析的;封装【页面】代码,便于项目的维护和开发
它们的好处就是减少代码冗余,便于后期维护。
不同点:
在vue组件中是通过通过 .vue 文件,来创建对应的组件;template 结构,script 行为,style 样式
在react组件中一切都是JS,因此要学习React,JS要合格
react和vue都是做组件化的,整体的功能都类似,但是他们的设计思路是有很多不同的。使用react和vue,主要是理解他们的设计思路的不同。
react整体是函数式的思想
而vue的思想是响应式的
初体验
不用jsx语法
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>
// <ul id="ulObj">
// <li>锄禾日当午,</li>
// <li>汗滴禾下土。</li>
// <li>谁知盘中餐,</li>
// <li>粒粒皆辛苦。</li>
// </ul>
// 1. 创建渲染元素/标签
const li1 = React.createElement('li', null, '锄禾日当午,')
const li2 = React.createElement('li', null, '汗滴禾下土。')
const li3 = React.createElement('li', null, '谁知盘中餐,')
const li4 = React.createElement('li', null, '粒粒皆辛苦。')
const ul = React.createElement('ul', {id:"ulObj"}, li1, li2, li3, li4)
// 2. 渲染展示数据
ReactDOM.render(ul, document.querySelector('#app'))
</script>
用jsx语法
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--
JSX是js扩展语法,浏览器不能直接识别,需要通过babel转义
-->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
// 1. 用JSX语法创建react对象
const h1Element = <h1 title="this is h1 tag">hello,webopenfather</h1>
// 2. 渲染
ReactDOM.render(h1Element, document.querySelector('#app'))
let uname = '神龙教主'
let age = 18
let say = () => 'hello'
// 1. 用JSX语法创建react对象
const ulElement = (<ul id="ulObj">
<li>{uname}</li>
<li>锄禾日当午,</li>
{ /* <li>汗滴禾下土。</li> */ }
<li>谁知盘中餐,</li>
<li>粒粒皆辛苦。</li>
<li>调用函数:{say()}</li>
<li>年龄+1: {age+1}</li>
</ul>)
// 2. 渲染
ReactDOM.render(ulElement, document.querySelector('#app'))
</script>
react主要采用虚拟DOM和fiff算法,很好的提高了页面渲染性能:
虚拟DOM是由state和jsx组成的,导致原因是(回流&重绘&浏览器工作机制),
当stat数据改变,state数据和JSX模板 会生成新的虚拟DOM,而react会把虚拟dom抽象成一个dom树,再通过diff算法让新旧DOM树同层比较,找到其中的不同之处,从而可以改变真实的DOM,最后渲染页面。
回流在这里指的是DOM的大小整体布局发生改变发生的状态。
重绘这里指的是DOM中的颜色等改变,而整体布局没发生改变的状态。
1 步骤一:用JS对象模拟DOM树
2 步骤二:比较两棵虚拟DOM树的差异
3 步骤三:把差异应用到真正的DOM树上
详情可参考链接
切记:当遍历数据的时候要写key 提升性能