React 知识点回忆（一）

最新推荐文章于 2024-09-05 09:28:01 发布

@Ralph

最新推荐文章于 2024-09-05 09:28:01 发布

阅读量147

点赞数

分类专栏： React 文章标签： react.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_46198981/article/details/120515174

版权

React 专栏收录该内容

6 篇文章

订阅专栏

一、React是什么？

React 是一个用于构建用户界面的 JavaScript 库。

二、在网页中使用React

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 定义字符编码 -->
  <meta charset="UTF-8">
  <!-- 引入react核心库 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- 引入react-dome 支持react操作dom -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 引入babel 将jsx转换为js -->
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <!-- 定义网页标题 -->
  <title>React</title>
</head>
<body>
  <div id="box"></div>
  <script type="text/babel">

  // 通过JSX创建HTML元素
  const element = <div>Hello React</div>

  // 通过React.createElement创建HTML元素
  const el = React.createElement('div', {}, 'Hello React')

  // ReactDOM.render(element, document.getElementById('box'))
  ReactDOM.render(el, document.getElementById('box'))

  </script>
</body>
</html>

1、通过JSX语法创建HTML元素

const element = <div>Hello React</div>

2、通过 React.createElement 创建HTML元素

/**
 *  React.createElement(tagName, props, value)
 *  tagName --> 标签名[string]
 *  props --> 标签属性[object]
 *  value --> 值[string / object]
 **/
const element = React.createElement('div', {}, 'Hello React')

既然说，React中已经内置了createElement Api，为什么还需要新增一个JSX语法来创建HTML元素？

当创建的元素存在嵌套关系时，在书写时会显得异常麻烦。

例如：
	// JSX语法
	const element = (
		<div>
			<span>name：</span>
			<span>Ralph</span>
		</div>
	)
	// createElement Api语法
	const element = React.createElement(
		'div', 
		{},
		[
			React.createElement('span', { key: 1 }, 'name：'), 
			React.createElement('span', { key: 2 }, 'Ralph')
		]
	)

当细心查看代码时，不难想到一个小手段。如果在第三个参数写一个string类型的html，这样可不可以正常执行呢？

const element = React.createElement(
		'div', 
		{},
		`
      	  <span>name：</span>
     	  <span>Ralph</span>
   		`
	)

执行效果如下：
效果图
由上图，可以看出这样是行不通的，所以，由此可见JSX语法对于开发带来的帮助是非常大的。

3、组件化开发

通过函数创建组件

	<!DOCTYPE html>
	<html lang="en">
		<head>
		 	<!-- 定义字符编码 -->
			<meta charset="UTF-8">
			<!-- 引入react核心库 -->
			<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
			<!-- 引入react-dome 支持react操作dom -->
			<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
			<!-- 引入babel 将jsx转换为js -->
			<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
			<!-- 定义网页标题 -->
			<title>React</title>
		</head>
		<body>
			<div id="box"></div>
			<script type="text/babel">

				function Component() {
					return <span>Hello React</span>
				}

				ReactDOM.render(<Component />, document.getElementById('box'))

			</script>
		</body>
	</html>

通过类创建组件


	<!DOCTYPE html>
	<html lang="en">
		<head>
		 	<!-- 定义字符编码 -->
			<meta charset="UTF-8">
			<!-- 引入react核心库 -->
			<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
			<!-- 引入react-dome 支持react操作dom -->
			<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
			<!-- 引入babel 将jsx转换为js -->
			<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
			<!-- 定义网页标题 -->
			<title>React</title>
		</head>
		<body>
			<div id="box"></div>
			<script type="text/babel">

				class Component extends React.Component {
					render() {
  						return <span>Hello React</span>
					}
				}

				ReactDOM.render(<Component />, document.getElementById('box'))

			</script>
		</body>
	</html>