当前位置： 首页>前端>正文

大厂还用redisson吗 大厂用react

前端2024-04-22 00:17:07

了解React

:FaceBook公司开发的

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

  • 用户界面: HTML界面
  • 库: Library（库）和 Framework（框架)

特点:

  1. 声明式
  2. 组件化
  3. 一次学习,随处使用
  4. 相比较于 Vue，React 强调尽可能的利用 JS 语言自身的能力来编写 UI，而不是通过造轮子增强 HTML 的功能。

从个人角度来看React: **大厂必备**

脚手架创建一个React项目

方法一:

  1. 全局安装 npm i -g create-react-app 或者 yarn global add create-react-app。
  2. 初始化项目 create-react-app my-app，my-app 表示项目名称，可以修改。
  3. 启动项目：yarn start 或者 npm start。

方法二(推荐):

  1. 命令：npx create-react-app react-basic。
  2. 启动项目：yarn start or npm start。

注意: npx 是 npm@v5.2 版本新添加的命令，用来简化 npm 工具包的使用流程。

优点: npx 会调用最新的 create-react-app 直接创建 React 项目。

渲染基本的页面

  1. 删除 src 和 public 目录中的所有内容。
  2. 新建 public/index.html 
  3. 代码如下
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React项目</title>
</head>

<body>
  <div id="root"></div>
</body>

</html>
  1. 新建  src/index.js 文件。
  2. 引入 React 核心库和涉及 DOM 操作的包。
  3. 调用 React.createElement() 方法创建 React 元素。
  4. 代码如下:
// create-react-app 脚手架生成的项目中已经下载好了 react 和 react-dom，无需重复下载，直接使用即可
// 引入react核心包
import React from 'react'

// 设计DOM来渲染的包
import ReactDom from 'react-dom'

/** 创建标签
 * 标签上面的属性(对象),标签里面的内容
 * 返回值react元素
 */

// 标签名、标签属性、标签内容，返回的是一个 React 元素（虚拟 DOM）
const heELE = React.createElement(
	'h1',
	{
		title: 'Hello React',
		style: {}
	},
	'Hellow Word'
)

// 渲染谁，渲染到哪里
ReactDom.render(heELE, document.querySelector('#root'))

JSX渲染复杂页面

假如遇见更复杂的页面,使用 React.createElement() 就会显得繁琐/不简洁 不直观,无法一眼看出所要描述的页面,代码不容易描述.

比如渲染这种页面:


<div class="wrap">
    <ul>
        <li>React</li>
        <li>Vue</li>
        <li>Angular</li>
    </ul>
</div>


使用React.createElement()渲染:


// 引入react核心包\
import React from 'react'
// 设计DOM来渲染的一个包
import ReactDom from 'react-dom'


// 创建一个ul列表
const ELE = React.createElement(
	'div',
	{ className: 'wrap' },
	React.createElement(
		'ul',
		null,
		React.createElement('li', null, 'React'),
		React.createElement('li', null, 'Vue'),
		React.createElement('li', null, 'Angular')
	)
)

ReactDom.render(ELE, document.querySelector('#root'))


对比使用JSX来渲染:


// 引入react核心包\
import React from 'react'
// 设计DOM来渲染的一个包
import ReactDom from 'react-dom'

// JSX
// 外面用小括包起来, 防止自动插入分号产生bug
const ele = (
	<div className="warp">
		<ul>
			<li>React</li>
			<li>Vue</li>
			<li>Angular</li>
		</ul>
	</div>
)

ReactDom.render(ele, document.querySelector('#root'))


 显而易见: JSX声明式语法更加直观，与 HTML 结构相同，降低了学习成本，提高了开发效率，JSX 是 React 的核心之一。

JSX的基本使用

  1. 首先使用 JSX 创建 React 元素
  2. 代码如下:
const title = <h1>Hello JSX</h1>
  1. 然后使用 ReactDOM.render() 方法渲染 React 元素到页面
  2. 代码如下:
ReactDOM.render(title, document.querySelector('#root'))

工作原理: JSX 需要使用 Babel 编译成 React.createElement() 的形式，然后配合 React 才能在浏览器中使用，而 create-react-app 脚手架中已经内置了 Babel 及相关配置。

JSX 语法的包为：@babel/preset-react

JSX注意点:

  1. 必须有 1 个根节点，或者虚拟根节点 <></>、<React.Fragment></React.Fragment>。
  2. 属性名一般是驼峰的写法且不能是 JS 中的关键字，例如 class 改成 className，label 的 for 属性改为 htmlFor，colspan 改为 colSpan。
  3. 元素若没有子节点，可以使用单标签，但一定要闭合，例如 <span/>。
  4. React@16.14 之前需要先引入 React 才能使用 JSX（这个也好理解，因为 JSX 最后还是要被转成 React.createElement() 的形式）。
  5. 换行建议使用 () 进行包裹，防止换行的时候zi的时候自动插入分号的 Bug。

在JSX中使用表达式

单大括号中可以使用除了对象以外任意的表达式（可以产生结果的式子）。

  • 普通的简单数据类型。
const name = 'zs'
const age = 18
const title = (
    <h1>
        姓名：{name}, 年龄：{age}
    </h1>
)
  • 对象中的属性。
const car = {
    brand: '玛莎拉蒂',
}
const title = <h1>汽车：{car.brand}</h1>
  • 数组中的某一项甚至整个数组。
const friends = ['张三', '李四']
const title = <h1>姓名：{friends}</h1>
  • 可以调用方法。
function sayHi() {
    return '你好'
}
const title = <h1>sayHi：{sayHi()}</h1>

注意:

  • JS 对象虽然也是表达式，但是不能直接嵌套在 {} 中，一般只会出现在 style 属性中。
  • JSX 本身也是表达式。
const span = <span>我是一个span</span>
const title = <h1>盒子{span}</h1>
  • JSX 中可以包含任意的表达式（除了对象）。
  • JSX 中不能放语句，例如 if、switch、for、while 等。  

https://www.xamrdz.com/web/28p1925827.html

相关文章：