关于react
关于react的简介。
我们主要来看下怎么应用:
如果我们要在一个id为root的div标签中新建一个p标签,文本内容为hello react。正常是这个样子的
<div id="root">
<p>hello react</p>
</div>
使用react是这个样子的
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 引入reactjs库-->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
</div>
<script type="text/javascript">
// 创建一个react元素p1。其中'p'代表的是html中的p标签,null位置是需要传递的数据,'hello react'是p标签中文本
const p1 = React.createElement('p', null, 'hello react');
// 使用原始js获取到id为root的div标签
const root = document.getElementById("root");
// 使用ReactDOM.render()方法,将其渲染到id为root的DOM 节点上
ReactDOM.render(p1, root);
</script>
</body>
</html>
1、首页我们要先引入react的js库
2、使用React.createElement()方法创建p标签
3、使用原生方法document.getElementById(),获取到id为root的div标签
4、通过ReactDOM.render()方法渲染p1元素到真实DOM中
单个标签就好写这么多……那多个标签呢
正常是这个样子的
<div id="root">
<p>hello react</p>
<p>hello react</p>
<p>hello react</p>
<p>hello react</p>
<p>hello react</p>
</div>
有几个我们复制几个就好了。
在来看看react中是怎么写的,需要注意的是,由于ReactDOM.render()只使用一个元素作为参数,当需要渲染两个同级别元素,会出现问题。这个情况下,我们就需要将同级别元素包裹在一个html标签中,比如:<div>
或是<span>
示例如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 引入reactjs库-->
<script