react简单使用

已于 2023-10-07 09:47:16 修改
阅读量27 收藏
点赞数
分类专栏： 前端 react 文章标签： react.js javascript 前端
于 2023-10-07 09:33:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40561863/article/details/133632401
版权

基本概念

react中文官网：https://react.docschina.org/

react的由来

react是有Facebook开发出来的js库，Facebook内部团队开发内部项目时，觉得市面上的js框架都不好用，觉得自己开发一套js库来满足项目需求。做出来后发现很好用，在2013年，5月的时候进行了开源。

由于react设计思想的独特性，在当时属于是革命性的创新，性能非常出众，编写代码逻辑逻辑分成简单，受到了越来越多的程序员关注，被认为可能是未来web开发的主流工具。

由于react项目越来越大，从早期的UI引擎变了一套前后端通吃的web App解决方案，衍生出了react native项目，希望使用web前端的代码，写一套就可以在多段运行，如果这个目标实现，整个互联网都将被颠覆。

使用react的理由

  1. 使用组件化开发方式，符合现代web开发的趋势
  2. 技术成熟、社区完备，配套齐全、适合于大型项目
  3. 有facebook专门团队维护，技术支持非常可靠
  4. 一次学习，随处编写
  5. 使用方式简单，性能非常好，支持服务度渲染
  6. react非常或，从技术角度，满足大家好奇心，有利于提升技术水平，从职业角度来说，有利于职业晋升，有利于参与大型项目。

react的特点

  • 声明式：React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

  • 组件化：构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。由于组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并保持状态与 DOM 分离。

  • 一次学习，随处编写

    无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。

    React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

虚拟DOM

什么是虚拟DOM

在react中，每个DOM对象都有一个对应的虚拟DOM，它是DOM对象一js对象的方式进行了描述。

DOM元素：

<div className="container">
    <h3>你好react</h3>
    <p>react非常好</p>
</div>

对应的虚拟DOM对象：

{
    type: 'div',
    props: {
        className: 'container'
    },
    children: [
        {
            type: 'h3',
            props: null,
            children: [
                {
                    type: 'text',
                    props: {
                        textContent: '你好react'
                    }
                }
            ]
        },
        {
            type: 'p',
            props: null,
            children: [
                {
                    type: 'text',
                    props: {
                        textContent: 'react非常好'
                    }
                }
            ]
        }
    ]
}

虚拟DOM如何提升效率的

在react中，第一次创建DOM对象后，会为每个DOM对象对应创建虚拟DOM对象，修改数据时，在DOM对象更新前，react会将虚拟DOM对象进行更新对比，对比更新前和更新后的虚拟DOM对象，找到对应发生变化的部分，react会操作发生变化部分去更新真实的DOM对象，react仅更新必要更新的部分，不会操作其他

无关的DOM元素。

solid.js

Svelte

react和DOM

安装核心包

  1. 初始化项目

    yarn init -y

  2. 安装相关依赖包

    yarn add react
yarn add react-dom
yarn add babel-standalone

    react：react核心包

    react-dom：提供了操作DOM的相关功能

    babel-standalone：有babel编译器提供的包，可以将es6代码转换为es5代码，让不持之es6的浏览器去更好执行react代码。

简单使用react

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./node_modules/react/umd/react.production.min.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
    <script src="./node_modules/babel-standalone/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root"></div>

    <script>
        let template = React.createElement('h1', null, 'hello react');
        ReactDOM.render(template, document.getElementById('root'));
    </script>
</body>
</html>

React.createElement：创建一个模板

ReactDOM.render：挂载模板进行渲染

多个DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./node_modules/react/umd/react.production.min.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
    <script src="./node_modules/babel-standalone/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root"></div>

    <script>
        let temp1 = React.createElement('h1', null, 'react');
        let temp2 = React.createElement('h2', null, 'react2')
        let temp3 = React.createElement('h3', null, 'react3');
        let template = React.createElement('div', null, [temp1, temp2, temp3]);
        ReactDOM.render(template, document.getElementById('root'));
    </script>
</body>
</html>

可以直接在render函数传递数组进行渲染

也可以创建一个父级包裹多个DOM元素，人家在render函数渲染这个父级元素。

JSX的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./node_modules/react/umd/react.production.min.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
    <script src="./node_modules/babel-standalone/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        const container = (
            <div>
                <h1>hello react1</h1>
                <h2>hello react2</h2>
                <h3>hello react3</h3>
            </div>
        )
        ReactDOM.render(container, document.getElementById('root'));
    </script>
</body>
</html>

通过对比，jsx的方式去编写dom元素显得更加的直观便捷，DOM元素结构看起来更加的清晰明了，能联想到html中的DOM元素结构。

babel官网：https://www.babeljs.cn/

jsx编写方式，最终会转换成React.createElement的方式去运行创建，jsx只是为了让开发者更加方便快捷的去完成代码的编写。

后续在开发项目中，重点使用jsx的方式去编写代码。

react脚手架搭建

脚手架的搭建

Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。

它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。

创建react项目的两种方式：

  1. 通过npx临时使用脚手架创建项目

    npx create-react-app [项目名称]

    使用npx创建项目，会临时使用create-react-app，一旦项目创建完成后就删除create-react-app脚手架，这种方式的项目通常最新的。

  2. 全局安装脚手架工具

    npm i -g create-react-app

create-react-app [项目名称]

    使用全局安装脚手架的方式去安装项目，速度上会快一点，如果长时间不更新脚手架，那么安装的项目可能是旧版本，需要手动更新脚手架项目。

文件目录

  • public/index.html：项目默认的html模板文件
  • src
    • App.js：项目的根组件，类似于vue中的App.vue
    • index.js：项目的入口文件，类似于vue中的main.js
  • .gitignore：上传到git时需要忽略的文件配置

配置命令：

  • npm run start：启动项目
  • npm run build：完成项目构建和打包
  • npm run eject：在create-react-app创建的项目中，相关配置项被隐藏了，这个命令可以反编译出项目的相关配置，这个操作是不可逆的，一旦编译后，那么这些配置就会一直在项目中存在，万不得已编出以后来，开发人员就可以获得配置的权限去对项目进行配置，但是一般不进行编译，可以用其他插件去替代完成。

JSX核心语法

什么是JSX

在网络的标签语言中，存在着两种

  • HTML：使用标签做网页布局，更多是内容的呈现，标签时固定的
  • XML：可扩展的标签语言，也是用标签来写代码，标签是可自定义的，主要作用是用于数据的存储和传输。

JSX = JavaScript + XML，可以说是JavaScript的一种扩展语法，结合了JavaScript和xml的语法，js中可以编写DOM元素，有了jsx之后，可以更加清晰的描述DOM的结构层次，编写代码时也更加的方便快捷，包括了js中的语法和相关api。

jsx的优点：

  • jsx执行更快，编译后做了优化
  • jsx是类型安全的，在编译过程中就可以发现错误，可以防止注入攻击
  • 编写代码时也更加的方便快捷

JSX表达式

jsx文件后缀名有两种，一种是.js，另一中.jsx

jsx嵌入表达式

在jsx中，DOM元素要嵌入变量，应该使用{}代表嵌入jsx表达式。

let msg = '欢迎学习react'

function App() {
  return (
    <div>
      {msg}
    </div>
  );
}

export default App;
算数表达式

嵌入jsx的表达式中，可以进行算数运算得到结果。包括加减乘除

let count = 2;
let count2 = 3;

function App() {
  return (
    <div>
      {count + count2}
    </div>
  );
}

export default App;
条件表达式

在jsx中，嵌入表达式中，条件判断只能写三元运算符，不能写if/else或者switch/case等等条件判断语句。

let age = 18;

function App() {
  return (
    <div>
      {age >= 18 ? '成年' : '未成年'}
    </div>
  );
}

export default App;
函数表达式

在jsx嵌入表达式中，可以直接运行函数。这里面可以封装跟多的复杂的业务逻辑。

let age = 17;

function getAdult() {
  if (age >= 18) {
    return '成年'
  } else {
    return '未成年'
  }
  
}

function App() {
  return (
    <div>
      {getAdult()}
    </div>
  );
}

export default App;
对象表达式

在jsx嵌入表达式中，直接放入对象会报错，

let user = {
  name: '张三',
  age: 20
}

function App() {
  return (
    <div>
      {user}
    </div>
  );
}

export default App;

报错如下：

image-20230220172338917

正确方式

应该访问对象中的属性：

let user = {
  name: '张三',
  age: 20
}

function App() {
  return (
    <div>
      姓名：{user.name}
      <br />
      年龄：{user.age}
    </div>
  );
}

export default App;
数组表达式

在jsx嵌入表达式中，可以直接渲染数组：

let userList = ['张三', '李四', '王五']

function App() {
  return (
    <div>
      {userList}
    </div>
  );
}

export default App;

在数组中，可以写DOM元素，

let userList = [<p>张三</p>, <p>李四</p>, <p>王五</p>]

直接渲染这个数组就可以将对应的DOM元素渲染出来

循环数组进行渲染

在jsx中通常使用.map去生成一个新的数组，类似于vue中的v-for

let userList = ['张三', '李四', '王五']

function App() {
  return (
    <div>
      {userList.map(item => {
        return <p key={item}>{item}</p>
      })}
    </div>
  );
}

export default App;

也可以使用函数封装，返回数组，如果逻辑很复杂，代码比较多，可以考虑使用函数去封装：


let userList = ['张三', '李四', '王五']

function newList() {
  let list = [];
  userList.forEach(item => {
    list.push(<p key={item}>{item}</p>);
  })
  return list;
}

function App() {
  return (
    <div>
      {newList()}
    </div>
  );
}

export default App;
jsx防止注入攻击
let str = '<p>web前端</p>';

function App() {
  return (
    <div>
      {str}
    </div>
  );
}

export default App;

这里没有对p进行解析，直接当成一个字符串渲染。

dangerouslySetInnerHTML

如果要讲字符串中的标签转换成真实的DOM元素进行渲染，需要使用dangerouslySetInnerHTML属性将值进行转换

let str = '<p>web前端</p>';

let value = {
  __html: str
}

function App() {
  return (
    <div dangerouslySetInnerHTML={value}></div>
  );
}

export default App;

dangerouslySetInnerHTML的值有点特殊，是一个对象，对象中的键是__html代表要转换的值。

jsx中样式

1）行内样式

function App() {
  return (
    <div style={{color: 'red'}}>web前端89期</div>
  );
}

export default App;

行内样式style应该嵌入jsx表达式，值是一个对象

双{{}}的意思：

第一层{}：嵌入jsx表达式

第二层{}：是一个js对象。

等价于下面这个写法：

let style = {color: 'red'}
function App() {
  return (
    <div style={style}>web前端</div>
  );
}

注意：

行内样式写带横岗的样式时，应该使用驼峰命名的方式：

<div style={{color: 'red', backgroundColor: 'blue'}}>web前端</div>

2）外部样式

  1. 新建css样式
    App.css

    .color {
  color: red;
  background-color: blue;
}

  2. 引入样式
    App.jsx

    import './App.css'

  3. 使用样式

    import './App.css'

function App() {
  return (
    <div className="color">web前端89期</div>
  );
}

export default App;

    注意：使用class样式时，jsx中应该使用className，不能使用class，因为class是js文件中的关键字。

  4. 使用多个类名
    和以前一样

    import './App.css'


function App() {
  return (
    <div className="color bg-color">web前端</div>
  );
}

export default App;

jsx中的注释

{/* web前端 */}
巷子里有条狗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react简单介绍和使用入门
01-08
由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 什么是React React 是一个为数据提供渲染为 HTML 视图...
react简单使用websocket
酸酸的博客
11-16 2047
简单使用： import React from 'react'; import Socket from '@/components/WebSocket/Socket'; class MessageList extends React.Component { constructor(props) { super(props); this.state = {}; this.socket = null; } //渲染前调用
react基本使用
小白小白从不日别的博客
06-02 1767
主要介绍了 react 的起源以及特点、基本使用步骤
video-react 简单使用
09-12 5959
1 后端实现服务 @GetMapping("/downloadFile/{fileName:.+}") public ResponseEntity<Resource> downloadFile() 2 前端调用 /downloadFile/xxx.mp4 见官网： https://video-react.js.org/components/player/ ...
React简单安装、使用
weixin_56511814的博客
04-05 1464
前言 react是fachebook公司产品用于创建用户界面的javascript库 React 特点： 虚拟dom节点 单向数据流 组件开发思维 一、安装 脚手架安装 npm i create-react-app -g 创建项目 create-react-app 项目名 启动项目 cd 项目名 npm start 二、jsx语法 JSX，是一个 JavaScript 的语法扩展（ JavaScript 与 HTML 结合）。我们建议在 React 中配合使用 JSX，JSX
react中使用swiper
tuzi007a的博客
03-08 1万+
react中使用swiper简单介绍[email protected]的基本使用安装和卸载在组件中引入完整示例react中使用[email protected]安装和卸载引入核心组件和样式让轮播图跑起来配置项说明完整配置项示例：封装一个简易的轮播器 简单介绍 作为轮播图的首选插件，swiper无疑是这方面专注性最强的。 但是，在使用时，每次都会遇到一个很*疼的问题： 就是把官网里的示例拿过来，并不能跑的通，而且不同版本之间， 使用起来 差别还挺大。 作为和框架契合前的最稳定版本[email protected]， 它使用简单，配置方便
React教程（详细版）
热门推荐
Ronychen的博客
03-19 19万+
一、简介（背景） 1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低 用js直接操作dom，浏览器会进行大量的回流和重绘 原生jjs没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点 采用组件化模式，声明式编码，提高开发效率和组件复用性 在React Native中可以用react预发进行安卓、io
React-redux使用教程
xm1037782843的博客
10-30 2729
react-redux,Redux 是 JavaScript 应用的状态容器
使用react制作简单购物车
m0_71933813的博客
12-10 972
开发React必须依赖三个库 1.react：包含react所必须的核心代码 2.react-dom：react渲染在不同平台所需要的核心代码 3.babel：将jsx转换成React代码的工具 组件化方法 1）.编写React的script代码中，必须添加 type="text/babel"，作用是可以让babel解析jsx的语法 2）.使用ReactDOM.createRoot创建一个根节点用变量接收，把内容渲染到root上 3）.定义组件 4）.要渲染的根组件 5
react中forwardRef简单使用
yangyanqin2545的博客
05-29 5052
forwardRef简单使用 forwardRef实际上就是当父组件需要得到子组件元素时，可以利用forwardRef来实现，下面我们来看一下简单的例子 1、在子组件中点击搜素按钮时，让文本输入框处于聚焦状态，此时可以直接使用ref来实现 import React, { useRef } from "react"; import { ReactDOM } from "react"; import { Button } from "antd"; const MyInput = () => { co
React中useEffect的简单使用
虚幻私塾
07-18 1572
之后的结果就是当依赖的变量改变的时候。useEffect也不会被再次执行了。不要对Dependencies撒谎。你等于向React撒了谎。如果你使用了某个变量。
React 简单demo
09-06
基于create-react-app 增加路由配置的简单应用（初学者可参考）
React简单介绍
10-19
React 是一个用于构建用户界面的 JavaScript 库，主要用于构建 UI，而不是一个 MVC 框架，React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它
json2react：使用JSON创建React组件
02-03
json2react允许您使用简单的架构从JSON创建React无状态组件。 为什么？ 我需要一种将静态视图作为数据而不是HTML代码存储在数据库中的方法。 使用这个库，您可以获取一些代表UI的远程数据，并使用React进行渲染。...
monthpicker:使用 react 的简单月份选择器
07-24
使用 react、styled-components 和 date-fns 构建的简单、干净的月份选择器组件 安装 yarn add @compeon/monthpicker 您还需要安装styled-components ，所以如果不是这样的话 yarn add styled-components 用法 ...
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 1085
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
React 中的响应时间详解
最新发布
阿乐的博客
05-23 1031
使用 React 可以在 JSX 中添加。其中事件处理函数为自定义函数，它将在响应交互（如点击、悬停、表单输入框获得焦点等）时触发。
react之refs与dom
weixin_73918953的博客
05-22 945
ref是一种脱围机制，用于保留不用于渲染的值。ref是一个普通的JavaScript对象，具有一个名为 current的属性，你可以对其进行读取或设置你可以通过调用useRef Hook 来让react给你一个ref与state一样，ref允许你在组件的重新渲染之间保留信息与state不同，设置ref的current值不会触发重新渲染不要在渲染过程中读取或写入 ref.current。这使你的组件难以预测Refs是一种通用概念，但大多数情况下你会使用它们来保存DOM元素你通过传递。
react高级用法
kuangjianming的博客
05-23 283
ref 一般可以标识在 hostComponent 宿主元素(首字母小写的，最终会变成基础HTML元素的)；ref 本身是不能跨层级捕获和传递的，forwardRef 可以接收父元素的ref信息，转发下去。类似 Vue 中的 inject 和 provider。对应过来就是 consumer 和 provider。我们可以通过forwardRef 进行转发。useMemo 的实现。
使用react实现简易计算器
04-01
下面是一个简单的计算器示例，使用 React 实现： ```jsx import React, { useState } from 'react'; function Calculator() { const [result, setResult] = useState(''); function handleClick(event) { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值