小小林熬夜学编程

这个屌丝很懒，什么也没留下！

热门标签

从0到1无比流畅的React入门教程

作者：小小林熬夜学编程 | 2024-06-04 09:14:39

踩

react

无比流畅的React入门教程TOC

React 是什么

简介

用于构建 Web 和原生交互界面的库
React 用组件创建用户界面
通俗来讲：是一个将数据渲染为HTML视图的开源JS库

其他信息

Facebook 开发，并且开源

为什么使用React?

原生JS使用DOM-API修改UI代码很繁琐，效率低下，React可以解决这种问题
原生JS直接操作DOM，浏览器会大量重绘重排，React可以解决这种问题
原生JS没有组件化方案好用，代码复用率很低，
React 采用组件化模式，React 让你可以通过组件来构建用户界面
React 使用声明式编码
React 使用虚拟DOM，将数据映射成虚拟DOM,再生成真实DOM,当数据变化的时候，会对原有的虚拟DOM和新的虚拟DOM进行比较,再生成真实DOM。
React 使用DOM diffing 算法，最小化页面重绘

特点

声明式设计 −为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

高效 −React采用Virtual DOM(虚拟DOM), 极大的提升了UI渲染(更新)效率。
灵活 −React 允许你结合其他框架或库一起使用。
JSX − JSX 是 JavaScript 语法的扩展。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。
组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流 − React 采用了单向响应的数据流，使组件状态更容易维护, 组件模块化更易于快速开发。

怎么用 React?

前置条件

ES6
Class
js基础

文档

中文文档: https://reactjs.bootcss.com/learn
英文文档: https://react.dev/learn

基础知识-点击获取教程代码

基础概念了解（也可以直接跳过概念，去看下面的快速上手部分哦）

了解 Babel

ES6转化为ES5
JSX转化为JS

了解模块与组件

模块

1、理解：向外提供特定功能的js文件；
2、业务逻辑增加，代码越来越多且复杂，需要拆成模块
3、作用：复用js，简化js的编写，提高js运行效率；

组件

1、理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)；
2、为什么要用组件：一个界面的功能更复杂，拆分成一个一个小组件，更容易复用
3、作用：复用编码，简化项目编码，提高运行效率；
模块化、组件化
应用的js都以模块来编写-就是模块化
应用是以多组件的方式实现-就是组件化

React开发者工具

引入依赖库，理解基础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" />
    <title>Document</title>
    <!-- React 核心库、 -->
    <script src="lib/react/react.development.js"></script>
    <!-- 操作 DOM 的 react 扩展库、 -->
    <script src="lib/react/react-dom.development.js"></script>
    <!-- 将 jsx 转为 js 的 babel 库 -->
    <script src="lib/babel.min.js"></script>
  </head>
  <body>
    <!-- 创建react解析的容器 -->
    <div id="xiaojin"></div>
    <script type="text/babel">
      var msg = "I am xiaojin!!!";
      //1.创建虚拟DOM
      const VDOM = (
        /* 此处一定不要写引号，因为不是字符串 */
        <h1 id="title">
          <span>Hello,{msg}</span>
        </h1>
      );
      //2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById("xiaojin"));
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

注释-在花括号里

ReactDOM.render(
    <div>
    {/*注释...*/}
     </div>,
    document.getElementById('XXX')
);
1
2
3
4
5
6

数组-JSX 允许在模板中插入数组,且自动展开

var arr = [
  <h1>A</h1>,
  <h1>B</h1>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('XXX')
);
1
2
3
4
5
6
7
8

组件

react提供两种形式创建组件，函数式组件和class形式

组件使用注意事项：

组件名必须是首字母大写

虚拟DOM元素只能有一个根元素

虚拟DOM元素必须有结束标签 < />

函数式组件

// 创建函数，返回一个虚拟DOM
function Test(props) {
  return <h1>Hello, {props.name}</h1>;
}
// 渲染
ReactDOM.Render(<Test name = "xiaojin" />,document.getElementById("div"));
1
2
3
4
5
6

class形式，这个提一下，后面就不再举例啦，之后都用函数式

  <div id="root"></div>
  <script type="text/babel">
    var msg = 'hello,world!';
    // class形式
    class HelloWorld extends React.Component {
      render(){
        console.log('this',this);
        return (
          <div>{msg}</div>
        )
      }
    }
    ReactDOM.render(<HelloWorld />,document.getElementById('root'));
1
2
3
4
5
6
7
8
9
10
11
12
13

组件核心属性

state
通俗理解：state就是组件的一些数据绑定，数据变了，页面就会变，这是我的理解哦

注意事项

1、切勿直接修改state数据，直接state会重新渲染内容；
2、通过setState修改后，不会立即修改DOM，react会在所有状态改变后，对比虚拟DOM，统一修改，提升性能；

关于this

1. 组件中的 render 方法中的 this 为组件实例对象
1. 组件自定义方法中由于开启了严格模式，this 指向 undefined 如何解决
2. 通过 bind 改变 this 指向
3. 推荐采用箭头函数，箭头函数的 this 指向

因为类式组件基本不怎么用，所以接下来只写函数式组件内容啦

props
理解

1、每个组件对象都会有props(properties的简写)属性；
2、组件属性保存在props中；

作用

1、通过标签属性从外向组件内传递变化的数据；
2、props只读

使用：

<script type="text/babel">
  function Person(props) {
    const { name, age, sex } = propsreturn(
      <ul>
        <li>姓名：{name}</li>
        <li>性别：{sex}</li>
        <li>年龄：{age}</li>
      </ul>
    );
  }
  Person.propTypes = {
    name: PropTypes.string.isRequired,
    // 限制name必传，且为字符串sex:PropTypes.string, 限制sex为字符串age:PropTypes.number, 限制age为数值
  };
  // 标签属性值
  Person.defaultProps = {
    sex: "女",
    age: 18,
  };
  ReactDOM.render(<Person name="XIAOJIN" />, document.getElementById("root"));
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

refs
组件内的标签可以定义ref属性来标识自己

有三种操作refs的方法，分别为：

字符串形式
回调形式 render(){return(
<input ref={c => this.input1 = c } type=“text” /> 箭头函数简写,使用时可通过 this.input1来使用
createRef形式
createRef step1:给DOM元素添加ref属性

<input ref={this.MyRef} type="text" placeholder="点击弹出" />
<input ref={this.MyRef1} type="text" placeholder="点击弹出" />
1
2

createRef step2:通过API，创建React的容器，会将DOM元素赋值给实例对象的名称为容器的属性的current

MyRef = React.createRef();
MyRef1 = React.createRef();
// 调用
btnOnClick = () =>{
    // 创建之后，将自身节点，传入current中
    console.log(this.MyRef.current.value);
}
1
2
3
4
5
6
7

事件处理

React 使用自定义事件，非原生 DOM 事件
React 事件通过事件委托方式处理（更高效）
可用 event.target获取 DOM 减少 refs使用

非受控租价与受控组件

包含表单元素的组件分为非受控租价与受控组件

受控组件：表单组件的输入组件随着输入并将内容存储到状态中（随时更新）
非受控组件：表单组件的输入组件的内容在有需求的时候才存储到状态中（即用即取）
受控组件
1、表单元素依赖于状态，表单元素需要默认值实时映射到状态的时候，就是受控组件，这个和双向绑定相似；
2、元素修改实时映射状态值，可对输入内容进行校验；
3、只有继承React.Component才有状态；
4、必须使用onChange绑定
非受控组件
1、在虚拟DOM节点上声明ref，且将引用赋值ref
2、react会自动将输入的值放在实例的ref属性上

注意：官方推荐受控组件，更好的控制组件生命流程

1、受控组件的两个要点：
组件的value属性与React中的状态绑定
组件内声明了onChange事件处理value的变化
2、非受控组件更像是传统的HTML表单元素，数据存储在DOM中，而不是组件内部，获取数据的方式是通过ref引用；
3、尽可能使用受控组件；
4、受控组件是将状态交由React处理，可以是任何元素，不局限于表单元素；
5、大量表单元素的页面，使用受控组件会使程序变得繁琐难控，此时使用非受控组件更为明智；

快速入门

我们以最快的方式先搞个DEMO项目练手

1. vscode安装appworks插件

2. 安装成功后，我们vscode左侧会出现这个图标，点击它

3. 查看右侧，选择一个干净的框架，快速创建一个react 项目

4. 输入项目名称，创建项目

5. 下载依赖，运行项目

#### 安装依赖
$ npm install

#### 启动服务
$ npm start  # visit http://localhost:3333
1
2
3
4
5

├── build/                         # 构建产物
├── mock/                          # 本地模拟数据
│   ├── index.[j,t]s
├── public/
│   ├── index.html                 # 应用入口 HTML
│   └── favicon.png                # Favicon
├── src/                           # 源码路径
│   ├── components/                # 自定义业务组件
│   │   └── Guide/
│   │       ├── index.[j,t]sx
│   │       ├── index.module.scss
│   ├── layouts/                   # 布局组件
│   │   └── BasicLayout/
│   │       ├── index.[j,t]sx
│   │       └── index.module.scss
│   ├── pages/                     # 页面
│   │   └── Home/                  # home 页面，约定路由转成小写
│   │       ├── components/        # 页面级自定义业务组件
│   │       ├── models.[j,t]sx     # 页面级数据状态
│   │       ├── index.[j,t]sx      # 页面入口
│   │       └── index.module.scss  # 页面样式文件
│   ├── configs/                   # [可选] 配置文件
│   │   └── menu.[j,t]s            # [可选] 菜单配置
│   ├── models/                    # [可选] 应用级数据状态
│   │   └── user.[j,t]s
│   ├── utils/                     # [可选] 工具库
│   ├── global.scss                # 全局样式
│   ├── routes.[j,t]s              # 路由配置
│   └── app.[j,t]s[x]              # 应用入口脚本
├── build.json                     # 工程配置
├── README.md
├── package.json
├── .editorconfig
├── .eslintignore
├── .eslintrc.[j,t]s
├── .gitignore
├── .stylelintignore
├── .stylelintrc.[j,t]s
├── .gitignore
└── [j,t]sconfig.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

运行项目，配置路由

创建组件文件

import * as React from 'react';

const HelloWorld = () => {
  function MyButton() {
    return <button>I'm a button</button>;
  }
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
};

export default HelloWorld;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

配置路由

import { lazy } from 'ice';
import BasicLayout from '@/layouts/BasicLayout';

const Dashboard = lazy(() => import('@/pages/Dashboard'));
const HelloWorld = lazy(() => import('@/pages/HelloWorld'));
const routerConfig = [
  {
    path: '/',
    component: BasicLayout,
    children: [
      {
        path: '/HelloWorld',
        component: HelloWorld,
      },
      {
        path: '/',
        component: Dashboard,
      },
    ],
  },
];
export default routerConfig;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

配置菜单

react-demo-xiaojin/src/layouts/BasicLayout/menuConfig.js

const headerMenuConfig = [];
const asideMenuConfig = [
  {
    name: 'Dashboard',
    path: '/',
    icon: 'smile',
  },
  {
    name: 'HelloWorld',
    path: '/HelloWorld',
    icon: 'smile',
  },
];
export { headerMenuConfig, asideMenuConfig };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

成功展示

创建和嵌套组件(就是上面的组件案例哦)

React 应用由组件组成，React 组件是返回标签的 JavaScript 函数，就像下面这样

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}
1
2
3
4
5

把它嵌套到另一个组件中

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}
1
2
3
4
5
6
7
8

悄悄说一句：React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母

添加标签和样式

编写 JSX 语法的标签

JSX简介

1、全称：JavaScript XML
2、react定义的一种类似于XML的JS扩展语法：JS + XML本质是React.createElement(component, props, …children)方法的语法糖
3、作用：用来简化创建虚拟DOM
4、写法：

var ele = <h1>Hello JSX!</h1>
1

基本语法规则

1、定义虚拟DOM时，不要写引号；
2、标签中混入JS表达式时要用{}；
3、样式的类名指定不要用class，要用className；
4、内联样式，要用style={{key:value}}的形式去写；
5、只有一个根标签；
6、标签必须闭合；
7、标签首字母：

(1)小写字母开头，代表该标签转为html中同名元素
(2)大写字母开头，代表组件

JSX 标签，你必须为所有最高层级的标签添加一个共同的父标签，例如使用下面的标签作为父标签

 <div>...</div> 或 <>...</> 
1

举个栗子

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}
1
2
3
4
5
6
7
8

如果你需要将大量 HTML 代码移植到 JSX 语法，可以使用这个在线转换器

添加样式

在 React 中，通过 className 这个属性来指定 CSS 类。它和 HTML 的 class 属性的功能是一样的：

<img className="avatar" />
1

然后在一个单独的 CSS 文件中为其编写 CSS 样式：

/* In your CSS */
.avatar {
  border-radius: 50%;
}
1
2
3
4

显示数据

举个栗子：以下代码将显示 user.name 的值。

return (
  <h1>
    {user.name}
  </h1>
);
1
2
3
4
5

举个栗子：以下代码读取 user.imageUrl 变量的值，然后将该值作为 src 的属性进行传递

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);
1
2
3
4
5
6

举个栗子：字符串拼接

悄悄告诉你：style={{}} 是对象被放在了 style={ } 花括号里哦

return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

条件渲染的几种方式

if 语句

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);
1
2
3
4
5
6
7
8
9
10
11

条件运算符

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>
1
2
3
4
5
6
7

更简短的 && 语法

<div>
  {isLoggedIn && <AdminPanel />}
</div>
1
2
3

列表

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];


const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

对事件做出响应并更新界面

举个栗子：处理事件代码是这样写的哦~

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}
1
2
3
4
5
6
7
8
9
10
11

如何点击按钮后更新页面数据呢？

从useState获得:当前状态(count)和更新它的函数(setCount)。你可以给它们取任何名字，惯例是[something, setSomething]。第一次显示按钮时，count将为0，因为将0传递给了useState()。当要改变状态时，调用setCount()并将新值传递给它。单击此按钮将增加计数器, React会再次调用你的组件函数。这一次，count将是1 …

import { useState } from 'react';

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

关于Use Hooks

以use开头的函数称为Hooks。useState是React提供的一个内置钩子。你可以在React API参考中找到其他内置Hooks。您还可以通过组合现有的hook来编写自己的hook。钩子比常规函数更具限制性。你只能在组件的顶层调用Hooks(或其他Hooks)。

在组件间共享数据

举个栗子

import { useState } from 'react';

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

下面是一个浅显易懂的父子组件传参案例

父组件

import Avatar from './Avatar.js';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

子组件

import { getImageUrl } from './utils.js';

export default function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

工具函数

export function getImageUrl(person, size = 's') {
  return (
    'https://i.imgur.com/' +
    person.imageId +
    size +
    '.jpg'
  );
}

1
2
3
4
5
6
7
8
9

今天先写到这里啦~明天开始，会添加详细介绍，将会包含以下方面：

添加交互

响应事件
State
更新状态中的对象、数组

管理状态

用状态响应输入
选择状态结构
在组件之间共享状态
保存和重置状态
将状态逻辑提取到一个reducer中
使用上下文深入传递数据
使用reducer和context进行扩展

今天就写到这里啦~

小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
大家要天天开心哦

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

在这里插入图片描述

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/671186

从0到1无比流畅的React入门教程

React 是什么

简介

其他信息

为什么使用React?

特点

怎么用 React?

前置条件

文档

基础知识-点击获取教程代码

基础概念了解（也可以直接跳过概念，去看下面的快速上手部分哦）

了解 Babel

了解 模块与组件

React开发者工具

引入依赖库，理解基础jsx语法

注释-在花括号里

数组-JSX 允许在模板中插入数组,且自动展开

组件

组件核心属性

因为类式组件基本不怎么用，所以接下来只写函数式组件内容啦

非受控租价与受控组件

快速入门

我们以最快的方式先搞个DEMO项目练手

1. vscode安装appworks插件

2. 安装成功后，我们vscode左侧会出现这个图标，点击它

3. 查看右侧，选择一个干净的框架，快速创建一个react 项目

4. 输入项目名称，创建项目

5. 下载依赖，运行项目

目录

运行项目，配置路由

创建组件文件

配置路由

配置菜单

成功展示

创建和嵌套组件(就是上面的组件案例哦)

React 应用由组件组成，React 组件是返回标签的 JavaScript 函数，就像下面这样

把它嵌套到另一个组件中

添加标签和样式

编写 JSX 语法的标签

举个栗子

如果你需要将大量 HTML 代码移植到 JSX 语法，可以使用这个在线转换器

添加样式

显示数据

举个栗子：以下代码将显示 user.name 的值。

举个栗子：以下代码读取 user.imageUrl 变量的值，然后将该值作为 src 的属性进行传递

举个栗子：字符串拼接

条件渲染的几种方式

if 语句

条件运算符

更简短的 && 语法

列表

对事件做出响应并更新界面

举个栗子：处理事件代码是这样写的哦~

如何点击按钮后更新页面数据呢？

关于Use Hooks

在组件间共享数据

举个栗子

下面是一个浅显易懂的父子组件传参案例

父组件

子组件

工具函数

今天先写到这里啦~明天开始，会添加详细介绍，将会包含以下方面：

添加交互

管理状态

今天就写到这里啦~

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

了解模块与组件