react入门与初体验

简介

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MV* 框架，都不满意，就决定自己写一套，用来架设 Instagram 照片墙的网站（17年用户量7亿+）。做出来以后，发现这套东西很好用，就在2013年5月开源了。
所以react也是当下很火的一个框架

那么react和vue有啥区别呢？

共同点：
模块化：从代码的角度来进行分析的；封装【逻辑】代码，便于项目的维护和开发
组件化：从 UI 界面的角度来进行分析的；封装【页面】代码，便于项目的维护和开发
它们的好处就是减少代码冗余，便于后期维护。
不同点：
在vue组件中是通过通过 .vue 文件，来创建对应的组件；template 结构，script 行为，style 样式
在react组件中一切都是JS，因此要学习React，JS要合格

初体验

不用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 提升性能

monthover

发布了7 篇原创文章 · 获赞 1 · 访问量 2971

私信关注

react入门与初体验

简介

初体验

猜你喜欢