【react】初识react

---

前言

本人是初步学习react的一个小菜鸟，在学习的过程中记录一下基础的react知识；若有不正确的地方，还望各位大佬多多指教

---

一、初识react

官网
中文文档
是用于构建用户界面的库，现在流行版本16.x，17.x，18.x

二、create-react-app

用于创建项目基本结构，利用webpack进行构建
要求：nodejs >= 16+

1.创建项目

代码如下（示例）：

npx create-react-app 项目名称
如：
npx creat-react-app my-app

创建项目时，会自动根据模版安装依赖，主要有三个依赖资源：
·react：核心包
·react-dom：用于浏览器中DOM渲染（如果是原生移动应用开发，可安装react-native包）
·react-script：封装了webpack构建工具的配置

2.package.json

npm scripts：
·start：启动开发任务，在开发的环境下，会启动开发服务器
·build：启动生产任务，将开发的源码构建为生产环境下使用的代码
·test：测试任务
·eject：弹出，将封装的webpack配置还原到项目目录中，注意，弹出配置后，不能再还原

目录结构

|-public 静态资源，不被构建工具处理
|-src    项目开发的源代码
   |-index.js   入口文件（不能改名字）
|-package.json
|-.gitignore

index.js

//16.x   //17.x
import React from 'react'
import ReactDom from 'react-dom'

ReactDom.render(
	<h1>Hello React.js</h1>,
	document.querySelect('#root'),
)

//18.x
import {creactRoot} from 'react-dom/lient'

//创建根节点
const root = creatRoot(document.querySelector('#root'))

//渲染
root.render(<h1>Hello React.js 18.x</h1>

JSX

是JavaScript的语法扩展，可以将其看作是一个模版语法，利用html标签语法，将布局和交互逻辑进行关联，推荐在react开发过程中使用JSX来完成UI编写。
JSX可以用在react中，也可以用在其它的技术栈中，比如在vue中，最终JSX所书写的UI布局模版语法，会被babel转译工具转译为实际布局使用到的节点结构

内嵌JS表达式

使用{ }（单花括号语法）：

<h1>函数组件 - App组件，接收到的标题:{props.title}</h1>

属性绑定（任然使用{ }来绑定属性值）：

<App title="标题内容" age = {18} />

{ }在渲染的html文本的时候会进行转义处理，以避免出现xss跨站脚本攻击
如果要渲染html文本(注意，通常仅对可信数据进行html渲染，一般不要对用户输入的数据直接进行html渲染)：

<span dangerouslySetInnerHTML={{__html:this.state.htmlMessage}}></span>

语法糖

JSX是React.createElement()的语法糖，在vscode里面书写的JSX代码，可以在控制台上看到实际的渲染出来的节点。
React.createElement()调用后，返回的是一个虚拟节点对象（用于构建虚拟DOM），虚拟DOM是内存中保存的一个对象，与实体DOM存在映射关系。
在渲染模版时，如果响应式的状态数据发生了变化，则会在内存中重新生成变化后的虚拟DOM节点对象，然后利用diff算法或fiber算法进行状态数据修改前后虚拟DOM节点对象的差异化比较，在比较的过程中会标记出变化点，当所有变化点都标记后，最后再一次性的进行实体DOM渲染，将标记的变化点对应位置的DOM进行更新（这个过程叫patch-打补丁）
其中，在vue中，vue2.x的render(creactElement)函数传递的createElement参数和vue3.x中h()函数都与React.creactElement()类似。

总结

以上就是初步学习react的内容，本文仅仅简单介绍了react的基础，若有不对的地方，请多多指教。