#React基本使用
一、React入门
1、React基本认识:
首先简单介绍JSX,它是对JavaScript扩展,JS和XML的结合,既不是字符串也不是标签。JSX生成React标签elements,常用来构建项目页面,它拥有JavaScript所有功能。为什么JSX把样式,事件,数据的展示放在一起呢?从项目的角度出发,我们常常为了把项目的复杂度的降低、易扩展、易维护、易阅读,把大的项目拆分为几个功能模块,功能模块再分为小模块。利用了功能,样式分离的观点,降低了耦合。JSX基本上也从这个角度去考虑,结合模块化开发+组件式开发,因为很多组件是经常用到的,比如导航栏、搜索框、登陆、轮播图,图标字体等。这样极大提高开发效率,比如antd 等组件库。组件:就是把事件,样式,数据等组合在一起。
知识点1:在JSX中的标签既不是字符串也不是HTML标签,不需要加引号’ '。
<script type="text/javascript" src="../js/react.development.js"></script> // react核心库
<script type="text/javascript" src="../js/react-dom.development.js"></script> // 操作DOM对象
<script type="text/javascript" src="../js/babel.min.js"></script>// 转换代码变成浏览器认识的代码js
const name='hello world';
const element=<h1>{
name}</h1>; // 虚拟DOM
// 渲染
ReactDOM.render(
element,// 组件 或者虚拟DOM
document.getElementById('root'),// 容器
)
//创建虚拟DOM两种方式 <h1 id="myId">hello world</h1> 简单示例一
// 多层嵌套<div><h1><span id ='myId'>123</span></h1></div>
// 第一种原始js方式 一般不用 太繁琐
const VDOM = React.creatElement('第一个参数是标签h1','第二个参数是属性名{id:"myId"}','第三个参数是内容hello world')
const VDOMS = React.creatElement('h1',{
},React.creatElement('div',