每一周的学习报告第七周 React入门_react实现excel周报-CSDN博客

本文链接：https://blog.csdn.net/m0_63548458/article/details/122761931

学习周报

React入门到入坟

这是一个基于React官方文档以及尚硅谷React视频课程的学习

Hello React (开始React)

什么是React

React是一个将数据渲染成HTML视图的开源JavaScript库(library)

为什么要学React

网页一般为响应式系统，以“监听事件，消息驱动”为基础，事件发生后执行既定的回调函数，使状态发生改变，ui更新
原生JavaScript的缺点：

状态更新,UI不会自动更新,需要手动地调用DOM进行更新
欠缺基本的代码层面的封装和隔离，代码层面没有组件化
UI之间的数据依赖关系，需要手动维护.如果依赖链路长．则会遇到“Callback Hell”
因此，我们使用React让状态更新后，ui自动更新；让代码组件化，可复用，可封装；状态间的相互依赖关系，只需要声明即可

在网站中添加React

步骤 1：添加一个 DOM 容器到 HTML

<!-- 准备好一个容器 -->
	<div id="test"></div>

要给这个div元素添加上一个ID方便我们待会用Javascript获取到它
步骤 2：添加 React 库

  <!-- ... 其它 HTML ... -->

  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

第一个为React，第二个为React-dom
步骤 3：使用React在网页中添加元素

创建虚拟DOM

let VDOM = React.createElement('h1',{id:'hello'},Hello React);

React.createElement()方法用于创建虚拟DOM，有三个参数，分别是标签名，标签属性，元素内容
2. 渲染虚拟DOM到页面

ReactDOM.render(VDOM,document.getElementById('test'))

ReactDOM.render()方法用于将虚拟DOM渲染到页面上，第一个参数为虚拟DOM，第二个参数为DOM 容器

虚拟DOM(Virtual DOM)

什么是虚拟DOM

Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。

为什么要使用虚拟DOM

它赋予了React声明式的API:您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
虚拟DOM可以减少操作真实DOM的次数(通过Diff)，提高网页的运行效率，并提高开发效率

JSX(JavaScript XML)

为什么要学习JSX

JSX 的全称为 JavaScript XML，是react定义的一种类似于XML的JS扩展语法，用来简化创建虚拟DOM
我们可以将上面Hello React实例改成：

let VDOM = <h1 id = 'hello'>Hello,React</h1>
ReactDOM.render(VDOM,document.getElementById('test'))

可以知道使用JSX可以让创建虚拟DOM变得简单且直观

使用JSX的准备工作

JSX语法不符合JS代码规范，需要使用babel翻译

首先添加babel的库

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
//添加babel支持

然后在script标签中添加 type=“text/babel” 属性

<script type="text/babel">
</script>

JSX语法规范

创建虚拟DOM时，不要写引号

let VDOM = <h1>Hello,React</h1> //此处一定不要加引号，因为不是字符串，是虚拟DOM

JSX允许在标签中写入JS表达式，用{}将表达式括起来

let VDOM = <h1>Hello,React{1+1}</h1> 
ReactDOM.render(VDOM,document.getElementById('test'))

但要注意的是{}中只能写入JS表达式，写入if while等结构会报错
3. 标签中的class要用className

<h1 className='hello'>Hello,React</h1>

改成class是为了与JS中class类作区分
4. 标签中的内联样式要以JS代码形式写入

<h1 style={{color:'white',fontSize:'40px'}}></h1>

注意属性名转为小驼峰
5. 创建虚拟DOM时只能有一个根标签
6. 标签必须闭合
当标签不需要内容时可以使用自结束

<input type="text"/>

标签开头为小写时，是HTML标签；大写时，是组件
因此在自定义组件时要将首字母大写