react笔记（一）虚拟DOM

最新推荐文章于 2024-04-30 10:50:19 发布

Anesthesia丶

最新推荐文章于 2024-04-30 10:50:19 发布

阅读量82

点赞数

分类专栏： react js 前端文章标签： react js 前端

本文链接：https://blog.csdn.net/qq_36991535/article/details/108982647

版权

前端同时被 3 个专栏收录

11 篇文章 2 订阅

订阅专栏

react

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

虚拟DOM渲染的几种方式

上次学了点点react，差不多都快忘了，复习了一下在这里做个总结。

虚拟dom渲染是react最大的特点之一，概念什么的我在这里就不罗嗦了（关键我也讲不清楚，啊哈哈！）。开始进入正题：

第一步：引包
我这里将这三个包下载到了本地，这里报一个坑。我这里是直接从菜鸟教程连接中去复制然后保存到本地的，然后出现一个问题，运行直接报错，应该是js文件不完整导致的，遇到问题的朋友可以f12打开开发者工具，从缓存的js中去保存，亲测解决。

<script src="js/react.development.js" type="text/javascript" charset="utf-8"></script>
<script src="js/react-dom.development.js" type="text/javascript" charset="utf-8"></script>
<script src="js/babel.min.js" type="text/javascript" charset="utf-8"></script>

第二步：测试代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app1"></div>
		<div id="app2"></div>
		<div id="app3"></div>
		<div id="app4"></div>
	</body>
	<script src="js/react.development.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/react-dom.development.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/babel.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/babel">

		//普通渲染
		var myStyle = {color:'red'}
		ReactDOM.render(<h1 style={myStyle}>我是app1!</h1>, document.getElementById('app1'));

		//抽取成变量
		myStyle = {color:'blue'}
		const ele = (
		      <div style={myStyle}>
		        <h1>我是app2!</h1>
		        <h1>我是app2!</h1>
		      </div>
		    );
		ReactDOM.render(ele, document.getElementById('app2'));

		//方法定义虚拟dom渲染
		myStyle = {color:'green'}
		function Name(props){
			return (
				<div style={myStyle}>
		        <h1>我是app3!{props.name}</h1>
		        <h1>我是app3!{props.name}</h1>
		        <h1>我是app3!{props.name}</h1>
		      </div>
			)
		}
		ReactDOM.render(<Name name={'张三'}/>, document.getElementById('app3'));

		//使用类定义虚拟dom
		myStyle = {color:'pink'}
		class App extends React.Component {
		  render() {
		    return (
		      <div style={myStyle}>
		        <h1>我是app4!{this.props.name}</h1>
		        <h1>我是app4!{this.props.name}</h1>
		        <h1>我是app4!{this.props.name}</h1>
		        <h1>我是app4!{this.props.name}</h1>
		      </div>
		    );
		  }
		}
		ReactDOM.render(<App name={'app4!!!'}/>, document.getElementById('app4'));
	</script>
</html>

第三步：运行结果
在这里插入图片描述
代码中有注释，可以稍微研究一下。其中我要提到的是关于{}的使用问题，直接在虚拟dom中去加style="color:red"类似的样式是会报错的，需要向我这个例子中一样去写，使用{}括起来定义成变量，如果不定义成变量则需要加上引号。

Anesthesia丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
react笔记（一）虚拟DOM

虚拟DOM渲染的几种方式上次学了点点react，差不多都快忘了，复习了一下在这里做个总结。虚拟dom渲染是react最大的特点之一，概念什么的我在这里就不罗嗦了（关键我也讲不清楚，啊哈哈！）。开始进入正题：第一步：引包我这里将这三个包下载到了本地，这里报一个坑。我这里是直接从菜鸟教程连接中去复制然后保存到本地的，然后出现一个问题，运行直接报错，应该是js文件不完整导致的，遇到问题的朋友可以f12打开开发者工具，从缓存的js中去保存，亲测解决。<script src="js/react.de
复制链接

扫一扫