这是我参与「第四届青训营 」笔记创作活动的的第10天
前言
什么是React
- React用于构建用户界面（UI，对前端来说，简单理解为：HTML 页面）的 JavaScript 库
- 由Facebook开源。
为什么要使用React
- 原生JavaScript操作DOM繁琐、效率低
- 使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
- 原生JavaScript没有组件化编码方案，代码复用率低。
React特点
-
声明式UI
- 你只需要描述UI（HTML）看起来是什么样的，就跟写HTML一样。
- react中通过数据驱动视图的变化，当数据发生改变react能够高效的更新并渲染DOM。
-
组件化
- 组件是 React 最重要的内容
- 组件表示页面中的部分内容
- 组合、复用多个组件，可以实现完整的页面功能
-
跨平台
- 使用react/react-dom可以开发Web应用
- 使用react/react-native可以开发移动端原生安卓 和 ios应用
Rect的使用
Rect安装
-
安装react包：
npm i react react-dom- react包是核心，提供创建元素，组件等功能
- react-dom包提供dom相关功能
-
引入react。
<script src="./modules/react.development.js"></script>
<script src="./modules/react-dom.development.js"></script>
-
创建react元素
- React.createElement（）方法
-
渲染react
- ReactDOM.render（）方法
<!DOCTYPE html>
<html lang="en">
<head>
<title>标题</title>
</head>
<body>
<div id="root"></div>
<!-- 引入js文件 -->
<script src="./modules/react.development.js"></script>
<script src="./modules//react-dom.development.js"></script>
<script>
//创建react元素
//参数1:元素名称
//参数2:元素属性
//参数3:元素的子节点
const title = React.createElement('p',{title:'我是标题',id:'p1'},
'Hello React',
React.createElement('span',null,'我是span节点'))
//渲染react元素
//参数一：要渲染的react元素
//参数2:挂载点
ReactDOM.render(title, document.getElementById('root'))
</script>
</body>
</html>
JSX的介绍
什么是JSX
JSX(javascript xml)就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展，只要你把HTML代码写在JS里，那就是JSX。
- 在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。官方定义是：类 XML 语法的 ECMAScript 扩展。
特点：
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 声明式语法更加直观，与HTML结构相同，降低学习成本，提高开发效率。
