Skip to main content

1.React笔记01

本系列笔记参考视频：

尚硅谷React教程：https://www.bilibili.com/video/BV1wy4y1D7JT/

本系列笔记主要内容来源以下笔记：

dselegent：https://github.com/dselegent/Learning-Notes

React简介​

react是什么？​

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

  • 是一个将数据渲染为 HTML 视图的开源 JS 库
  • 它遵循基于组件的方法，有助于构建可重用的 UI 组件
  • 它用于开发复杂的交互式的 web 和移动 UI

React 有什么特点？​

  1. 使用虚拟 DOM 而不是真正的 DOM
  2. 它可以用服务器渲染
  3. 它遵循单向数据流或数据绑定
  4. 高效
  5. 声明式编码，组件化编码

React 的一些主要优点？​

  1. 它提高了应用的性能
  2. 可以方便在客户端和服务器端使用
  3. 由于使用 JSX，代码的可读性更好
  4. 使用React，编写 UI 测试用例变得非常容易

为什么学？​

1.原生JS操作DOM繁琐，效率低

2.使用JS直接操作DOM,浏览器会进行大量的重绘重排

3.原生JS没有组件化编码方案，代码复用低

React 基础案例​

首先需要引入几个 react 包​

1730726301404

react.development.js		// React 核心库
react-dom.development.js	// 操作 DOM 的 react 扩展库
babel.min.js 			// 将 jsx 转为 js 的 babel 库

创建一个容器​

创建虚拟DOM，渲染到容器中​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello_react</title>
  </head>
  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      /* 此处一定要写babel */
      //1.创建虚拟DOM
      const VDOM = <h1>Hello</h1> /* 此处一定不要写引号，因为不是字符串 */
      //2.渲染虚拟DOM到页面
	const root = ReactDOM.createRoot(document.querySelector('#test'));
      root.render(VDOM);
    </script>
  </body>
</html>
  • React.createElement()
    • React.createElement(type, [props], [...children])
    • 用来创建React元素
    • React元素无法修改
  • ReactDOM.createRoot()
    • createRoot(container[, options])
    • 用来创建React的根容器，容器用来放置React元素
  • ReactDOM.render()
    • root.render(element)
    • 用来将React元素渲染到根元素中
    • 根元素中所有的内容都会被删除，被React元素所替换
    • 当重复调用render()时，React会将两次的渲染结果进行比较，
    • 它会确保只修改那些发生变化的元素，对DOM做最少的修改

这样，就会在页面中的这个div容器上添加这个h1.

后面很多地方没有用 createRoot这种方式是因为一开始学的课程是2020年的，这是现在新的创建方式。

这里我就只把第一个案例改成新方式了

jsx 语法​

JSX 是 JavaScript 的语法扩展，JSX 使得我们可以以类似于 HTML 的形式去使用 JS。JSX便是React中声明式编程的体现方式。声明式编程，简单理解就是以结果为导向的编程。使用JSX将我们所期望的网页结构编写出来，然后React再根据JSX自动生成JS代码。所以我们所编写的JSX代码，最终都会转换为以调用 React.createElement()创建元素的代码。

  1. 定义虚拟DOM，JSX不是字符串，不要加引号

  2. 标签中混入JS表达式的时候使用 {}

    id = {myId.toUpperCase()}

  3. 样式的类名指定不能使用class，使用 className

  4. 内敛样式要使用 {{}}包裹

    style={{color:'skyblue',fontSize:'24px'}}

  5. 不能有多个根标签，只能有一个根标签

  6. JSX的标签必须正确结束（自结束标签必须写/）

  7. JSX中html标签应该小写，React组件应该大写开头。如果小写字母开头，就将标签转化为 html 同名元素，如果 html 中无该标签对应的元素，就报错；如果是大写字母开头，react 就去渲染对应的组件，如果没有就报错

  8. 如果表达式是空值、布尔值、undefined，将不会显示

关于JS表达式和JS语句：

  • JS表达式：返回一个值，可以放在任何一个需要值的地方 a a+b demo(a) arr.map() function text()
  • JS语句：if() for() while() swith() 不会返回一个值