【前端知识】React简单入门

🕗 发布于 2024-12-09 03:21 前端 react.js 前端框架

概述

React是一个用于构建用户界面的JavaScript库，由Meta（前身为Facebook）开发。以下是对React的详细介绍：

一、产生背景与发展历程

产生背景：React起源于Facebook的内部项目，该公司对市场上所有JavaScript MVC框架都不满意，因此决定自行开发一套用于架设Instagram的网站。
发展历程：React的早期原型被称为“FaxJS”，由Facebook工程师Jordan Walke开发。React于2011年首次亮相，首次用于Facebook的Newsfeed。第二年在Instagram中使用。2013年5月，React在美国JSConf上开源。随着时间的推移，React项目逐渐壮大，从最初的UI引擎发展成为一整套前后端通吃的Web App解决方案。

二、主要特点

声明式设计：React使创建交互式用户界面变得简单。开发者可以为应用的每一个状态设计简洁的视图，当数据变动时，React能高效更新并渲染合适的组件。
组件化：React鼓励构建管理自身状态的封装组件，然后对这些组件进行组合以构成复杂的用户界面。这种组件化的开发方式有助于代码的复用和维护。
高效：React通过引入虚拟DOM的概念，最大限度地减少了与真实DOM的交互。虚拟DOM是一个在内存中构建的DOM树，当状态更新时，React会先比较虚拟DOM和真实DOM的差异，然后只更新那些发生变化的部分，从而提高了性能。
灵活：React非常灵活，可以与其他技术栈结合使用。开发者无需重写现有代码，只需引入React即可开发新功能。

三、技术细节

虚拟DOM：React使用虚拟DOM来提高性能。虚拟DOM是一个轻量级的JavaScript对象，它描述了真实DOM的结构。当React需要更新界面时，它会先更新虚拟DOM，然后比较虚拟DOM和真实DOM的差异，并据此更新真实DOM。
JSX：JSX是React的一种语法扩展，它允许在JavaScript代码中写HTML标签。JSX使得在React中描述用户界面变得更加直观和方便。
组件生命周期：React组件具有生命周期，包括挂载（Mounting）、更新（Updating）、卸载（Unmounting）和错误处理（Error Handling）等阶段。在每个生命周期阶段，React都会提供特定的钩子函数供开发者使用，以实现特定的功能。

四、应用场景与优势

应用场景：React适用于构建单页面应用（SPA）、移动应用（通过React Native）、服务器端渲染（SSR）等场景。
优势：
- 性能优越：由于引入了虚拟DOM和高效的更新机制，React在性能上表现出色。
- 组件化开发：组件化开发方式使得代码更加模块化、可复用性和可维护性更高。
- 生态系统丰富：React拥有庞大的社区和丰富的生态系统，提供了大量的第三方库和工具供开发者使用。

五、学习与实践

学习资源：React的官方文档是学习React的最佳起点。此外，还可以参考各种在线教程、书籍和视频课程等资源。
实践项目：通过参与实际项目或自己动手搭建项目来加深对React的理解和应用能力。实践过程中可以遇到并解决各种问题，从而不断提升自己的技能水平。

综上所述，React是一个功能强大且灵活的JavaScript库，适用于构建各种类型的用户界面。通过学习和实践React，开发者可以掌握现代前端开发的核心技能并提升自己的竞争力。

JSX语法

JSX（JavaScript XML）是一种在JavaScript中编写类似XML的语法扩展，常用于React等库中描述用户界面。以下是对JSX语法的详细解析：

一、JSX的基本概念

定义：JSX是JavaScript XML（HTML）的缩写，表示在JavaScript代码中书写HTML结构。
特性：JSX并不是标准的JavaScript语法，而是JavaScript的语法扩展。浏览器默认是不识别JSX的，但在React项目的脚手架中，通常会内置@babel/plugin-transform-react-jsx包来解析该语法。

二、JSX的基本使用

标签闭合：JSX标签必须闭合，无论是自闭合标签还是包含子元素的标签。例如，<div>需要对应的</div>来闭合，而像<img />或<br />这样的自闭合标签则以斜杠/结尾。
根标签：JSX中只能有一个根元素。如果需要渲染多个元素，可以将它们包裹在一个父元素中，如<div>。
表达式插值：在JSX中，可以将JavaScript表达式放在大括号{}中，以在渲染时插入动态内容。这些表达式可以是变量、函数返回值、计算表达式等。但需要注意的是，在JSX中只能嵌入表达式，不能嵌入语句（如if语句、for循环等）。

三、JSX中的JavaScript表达式

嵌入表达式：在JSX中，可以使用大括号{}来嵌入JavaScript表达式。例如，const name = '云墨卿'; return ( <div>你好,{name}</div> );。
注意事项：
- 单大括号中可以是任意的JavaScript表达式，如三元表达式、加减乘除、数组、字符串等。
- 单大括号中不能出现语句（例如if/for等）。
- JavaScript对象一般只会出现在style属性中。

四、JSX的条件渲染

实现方式：虽然不能在JSX中直接写if/else判断，但可以嵌入函数表达式。在函数表达式中进行if/else判断，或者使用三元运算符来实现条件渲染。
示例：const flag = true; {flag ? <div>true显示</div> : <div>false显示</div>}，或者使用逻辑与运算符flag && <div>true显示</div>。

五、JSX的列表渲染

实现方式：可以使用JavaScript数组的map()方法来遍历数组，并为每个元素生成对应的JSX元素，从而实现列表渲染。
注意事项：遍历列表时，需要为每个列表项提供一个唯一的key属性，以提高页面性能。key属性只在内部使用，不会出现在真实的DOM中。
示例：

const list = [
  { id: 1, name: 'JavaScript' },
  { id: 2, name: 'Vue' },
  { id: 3, name: 'React' },
  { id: 4, name: 'Angular' }
];

return (
  <ul>
    {list.map((item) => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

六、JSX的样式处理

内联样式：为元素设置内联样式时，需要使用style属性，并传递一个包含CSS属性的JavaScript对象。CSS属性名需要使用驼峰命名法（camelCase），而不是短横线命名法（kebab-case）。
类名：在JSX中，由于class是JavaScript的保留字，因此为元素添加类名时需要使用className属性。
动态类名：可以使用JavaScript表达式来动态地添加或移除类名。例如，<div className={isActive ? 'active' : ''}>。

七、JSX的其他注意事项

组件命名：当使用JSX定义组件时，如果组件名以大写字母开头，React会将其视为一个组件并尝试渲染它；如果以小写字母开头，React则会将其视为一个HTML标签。
组件引用：在JSX中引用组件时，需要确保组件已经被定义并且可以在当前作用域内被访问到。
避免直接使用JavaScript语句：如前所述，JSX中只能嵌入表达式，不能嵌入语句。如果需要执行复杂的逻辑，可以在渲染JSX之前先计算好需要渲染的内容。
性能优化：在大型项目中，需要注意JSX的渲染性能。可以通过使用React的React.memo、useMemo、useCallback等Hook来优化组件的渲染性能。

综上所述，JSX是React等库中的一项重要特性，它使得在JavaScript代码中书写HTML结构变得直观且高效。通过掌握JSX的基本语法和注意事项，可以编写出高效、可维护的React组件。

基础语法

React是一个用于构建用户界面的JavaScript库，其语法详细介绍如下：

一、基础概念

JSX：
- JSX是JavaScript语法的扩展，看起来很像XML。React开发不一定使用JSX，但建议使用它。
- 在JSX中，HTML标签用小写字母开头，React组件用大写字母开头。
- HTML标签的属性（如onclick和onchange）在JSX中必须写成小驼峰命名（如onClick）。
- 单标签在JSX中必须闭合。
- 在JSX中，<img />标签必须要有alt属性，否则会有警告。
- 在JSX语法中，为了防止和JavaScript关键字冲突，class必须写成className，label标签中的for属性必须写成htmlFor。
组件：
- React通过构建组件来使得代码更加容易复用，适用于大项目的开发。
- 组件名的首字母必须大写。
- 组件分为class组件（有状态组件）和函数组件（无状态组件）。
  - class组件：通过类的继承来创建，必须继承React.Component，必须有render方法，render方法中必须返回React元素（JSX）。
  - 函数组件：定义一个函数组件就是定义一个函数，建议使用箭头函数，函数的首字母必须大写，函数中必须返回React元素（JSX）。
- 有状态组件写起来比较复杂，性能相对较低，但功能更全，可以在组件内部定义组件的状态；无状态组件写起来比较简单，性能相对较高，但功能相对简单，不能在组件内部定义组件的状态。
单向响应的数据流：
- React实现了单向响应的数据流，从而减少了重复代码，比传统数据绑定更简单。

二、核心语法

状态（State）：
- 主要用于更新界面。
- 组件的State属性在生命周期函数getInitialState中初始化（class组件），或在组件外部通过useState钩子初始化（函数组件）。
- 当调用组件的this.setState（class组件）或setState函数（函数组件）改变state时，组件会重新渲染刷新。
属性（Props）：
- 主要用于组件之间传递数据，即标签的属性。
- 通过this.props（class组件）或函数参数（函数组件）访问传递进来的props。
事件处理：
- React中的事件绑定没有绑定到具体的DOM节点上，而是采用事件代理的模式绑定在根节点上。
- React模拟了一套事件冒泡机制，通过事件源找到真实触发的元素，然后执行该元素上的事件处理函数。
- 事件处理函数中会传入一个事件对象，该对象和普通的浏览器事件对象所包含的方法和属性基本一致，但它是React自己内部构建的。

三、组件生命周期（class组件）

React组件生命周期分为实例化、实例化完成后的更新、存在期（组件已存在时的状态改变）三个阶段，共提供了10个不同的API：

实例化：
- getDefaultProps：作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。
- getInitialState：返回一个对象，用于初始化组件的state。
- componentWillMount：组件即将挂载到DOM之前调用，此时render方法尚未被调用。
- render：创建虚拟DOM，该方法具有特殊的规则，如只能通过this.props和this.state访问数据，可以返回null、false或任何React组件等。
- componentDidMount：组件挂载到DOM后立即调用，此时可以通过ReactDOM.findDOMNode(this)获取到组件的DOM元素。
实例化完成后的更新（更新阶段与实例化阶段调用的生命周期方法相同，但触发时机不同）：
- 当组件的props或state发生变化时，会依次调用getInitialState、componentWillMount、render、componentDidMount方法，但通常不需要在更新阶段重写getInitialState和componentWillMount方法。
存在期：
- componentWillReceiveProps：组件接收到新的props之前调用。
- shouldComponentUpdate：组件接收到新的props或state之前调用，用于判断是否需要更新组件。返回true表示继续执行更新流程，返回false表示跳过更新流程，直接执行componentDidUpdate。
- componentWillUpdate：组件即将更新之前调用，此时不能修改组件的state或props。
- render：重新创建虚拟DOM。
- componentDidUpdate：组件更新后立即调用，此时可以访问更新后的DOM元素。

四、样式设置

在React中设置组件样式的语法有多种方式：

内联样式：使用内联样式对象来设置样式，样式对象是一个JavaScript对象，其中的属性名是CSS属性，属性值是对应的样式值。
CSS模块化：通过将CSS文件与组件文件关联起来，可以实现样式的模块化和隔离。在组件中引入CSS模块化文件后，可以使用对应的类名来设置样式。
CSS-in-JS库：使用如styled-components、emotion等CSS-in-JS库来在React组件中设置样式。这些库允许在组件定义的同时定义样式，并将样式与组件紧密关联在一起。

总之，React的语法涵盖了JSX、组件、状态管理、属性传递、事件处理、组件生命周期以及样式设置等多个方面。掌握这些语法是构建高效、可维护的React应用的基础。

自定义组件

在 React 中创建自定义组件是一个非常常见的任务，它允许你封装和重用代码，从而使你的应用程序更具模块化和可维护性。以下是如何创建和使用自定义组件的基本步骤：

1. 创建函数组件

你可以使用函数来定义简单的无状态组件（也称为函数组件）。

// MyComponent.js
import React from 'react';

const MyComponent = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is a custom component.</p>
    </div>
  );
};

export default MyComponent;

2. 使用类组件

对于需要管理状态和生命周期方法的组件，你可以使用类组件。

// MyComponent.js
import React, { Component } from 'react';

class MyComponent extends Component {
  state = {
    count: 0
  };

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default MyComponent;

3. 使用自定义组件

一旦你定义了你的组件，你就可以在其他组件中导入并使用它。

// App.js
import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div className="App">
      <MyComponent name="React User" />
    </div>
  );
}

export default App;

4. 传递 Props

在上面的例子中，我们已经展示了如何通过 props 向组件传递数据。你还可以传递更复杂的数据结构，如对象、数组等。

// App.js
import React from 'react';
import MyComponent from './MyComponent';

const user = {
  name: 'React Developer',
  age: 28,
  location: 'San Francisco'
};

function App() {
  return (
    <div className="App">
      <MyComponent {...user} />
    </div>
  );
}

// 在 MyComponent.js 中修改
const MyComponent = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>Age: {props.age}</p>
      <p>Location: {props.location}</p>
      <p>This is a custom component.</p>
    </div>
  );
};

5. 使用 CSS 样式

你可以通过内联样式、CSS 类或 CSS-in-JS 解决方案（如 styled-components）为组件添加样式。

使用内联样式

const MyComponent = (props) => {
  const style = {
    color: 'blue',
    fontSize: '20px'
  };

  return (
    <div style={style}>
      <h1>Hello, {props.name}!</h1>
      <p>This is a custom component.</p>
    </div>
  );
};

使用 CSS 类

首先，在 CSS 文件中定义样式：

/* MyComponent.css */
.my-component {
  color: blue;
  font-size: 20px;
}

然后在组件中导入并使用这些样式：

// MyComponent.js
import React from 'react';
import './MyComponent.css';

const MyComponent = (props) => {
  return (
    <div className="my-component">
      <h1>Hello, {props.name}!</h1>
      <p>This is a custom component.</p>
    </div>
  );
};

6. 高阶组件（HOC）

高阶组件（Higher-Order Components，HOC）是一个函数，它接受一个组件并返回一个新的组件。这通常用于复用组件逻辑。

// withLogger.js
import React from 'react';

const withLogger = (WrappedComponent) => {
  return (props) => {
    console.log('Rendering:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
};

// 使用 HOC
// MyComponent.js
import React from 'react';
import withLogger from './withLogger';

const MyComponent = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is a custom component.</p>
    </div>
  );
};

export default withLogger(MyComponent);

7. 使用 Hooks

Hooks 允许你在函数组件中使用状态和其他 React 特性。

// MyComponent.js
import React, { useState } from 'react';

const MyComponent = (props) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;

通过这些步骤，你可以创建功能强大且可重用的自定义组件，从而构建复杂的 React 应用程序。

完整例子

以下是一个简单的React应用示例，该应用包含登录功能和一个简单的答题界面。通过这个例子，可以展示React的基本使用，包括组件化开发、状态管理、事件处理等关键概念。

1. 初始化项目

首先，使用React的脚手架工具create-react-app来初始化一个新的React项目。在命令行中运行以下命令：

npx create-react-app my-react-app
cd my-react-app
npm start

这将创建一个名为my-react-app的新项目，并启动开发服务器。

2. 创建组件

在src目录下，创建一个新的组件文件夹components，并在其中创建两个组件文件：Login.js和Quiz.js。

Login.js

import React, { useState } from 'react';
import './Login.css'; // 引入CSS样式文件

const Login = () => {
  const [username, setUsername] = useState('');
  const [message, setMessage] = useState('');
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const handleChange = (e) => {
    setUsername(e.target.value);
  };

  const handleLogin = () => {
    if (username.length < 6 || username.length > 18) {
      setMessage('用户名长度为6-18位');
    } else {
      setMessage('');
      setIsLoggedIn(true);
    }
  };

  return (
    <div className="login-container">
      <h2>登录</h2>
      <input type="text" placeholder="请输入用户名" value={username} onChange={handleChange} />
      <button onClick={handleLogin}>登录</button>
      <p>{message}</p>
      {isLoggedIn && <Quiz />}
    </div>
  );
};

export default Login;

Quiz.js

import React, { useState } from 'react';
import './Quiz.css'; // 引入CSS样式文件

const questions = [
  {
    title: 'br标签是干什么的?',
    options: ['实现换行的', '显示图片的', '制作按钮的', '实现分段的'],
    answer: 0,
  },
  // 其他问题...
];

const Quiz = () => {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [selectedAnswer, setSelectedAnswer] = useState(null);

  const handleAnswerChange = (index) => {
    setSelectedAnswer(index);
  };

  const handleNextQuestion = () => {
    if (selectedAnswer !== null) {
      setCurrentQuestion((prev) => (prev + 1) % questions.length);
      setSelectedAnswer(null);
    }
  };

  return (
    <div className="quiz-container">
      <h2>{questions[currentQuestion].title}</h2>
      <ul>
        {questions[currentQuestion].options.map((option, index) => (
          <li key={index}>
            <input
              type="radio"
              id={`option-${index}`}
              name="answer"
              value={index}
              checked={selectedAnswer === index}
              onChange={() => handleAnswerChange(index)}
            />
            <label htmlFor={`option-${index}`}>{option}</label>
          </li>
        ))}
      </ul>
      <button onClick={handleNextQuestion}>下一题</button>
    </div>
  );
};

export default Quiz;

3. 应用样式

在src目录下创建Login.css和Quiz.css文件，为登录和答题界面添加样式。

Login.css

.login-container {
  width: 300px;
  margin: 0 auto;
  text-align: center;
}

/* 其他样式... */

Quiz.css

.quiz-container {
  width: 500px;
  margin: 0 auto;
  text-align: left;
}

/* 其他样式... */

4. 修改App.js

在src/App.js文件中，引入Login组件，并将其渲染到页面上。

import React from 'react';
import Login from './components/Login';
import './App.css';

function App() {
  return (
    <div className="App">
      <Login />
    </div>
  );
}

export default App;

5. 运行应用

确保开发服务器正在运行（使用npm start启动），然后在浏览器中打开http://localhost:3000，你将看到一个简单的登录界面。输入用户名并登录后，将显示答题界面。

总结

这个简单的React应用示例展示了如何使用React的组件化开发、状态管理和事件处理等功能来构建用户界面。通过创建Login和Quiz组件，并将它们组合在一起，我们可以轻松地实现一个具有登录功能和简单答题界面的Web应用。

原文地址：https://blog.csdn.net/wendao76/article/details/144311026

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Springboot美食分享平台
下一篇：写 c++ 需要注意什么

.NET(C#) 如何配置用户首选项及保存用户设置
.NET(C#) 如何配置用户首选项及保存用户设置
阅读更多2024-12-14
【最新】北大数字普惠金融指数数据集-省市县（2011-2023年）
郭峰,王靖一,王芳,孔涛,张勋,程志云.测度中国数字普惠金融发展:指数编制与空间特征[J].经济学(季刊),2020,19(04):1401-1418.时间跨度：省级和城市级指数时间跨度为2011-2
阅读更多2024-12-14
GESP202412 四级【Recamán】题解（AC）
a11ak−1−kkakak−1−kak−1k小杨想知道 Recamán 数列的前n项从小到大排序后的结果。手动计算非常困难，小杨希望你能帮他解决这个问题。
阅读更多2024-12-14
IDEA遇到EasyConnect中的网络资源无法访问的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/wanshanyu_/article/de
阅读更多2024-12-14
双目摄像头标定方法
此时已经完成标定，左下角为反投影误差，右边为外参可视化。将双目左右目拍的图像上传（左右目最好不少于20张）此时回到主页面，即可看到成功导出。把这些误差大的删除即可。
阅读更多2024-12-14
Servlet、omcat服务器架构与工作原理
Servlet是运行在服务器端的Java程序，它的主要职责之一是接收并处理来自客户端（如浏览器）的HTTP请求。当客户端发送一个请求到服务器时，Servlet可以解析请求中的信息，例如请求的URL路径
阅读更多2024-12-14
Vue生命周期钩子函数：深入解析与实践
作为高级Vue前端开发人员，对Vue组件的生命周期钩子函数有着深刻的理解是至关重要的。生命周期钩子函数是指在Vue组件的创建、更新、销毁等过程中，Vue自动调用的一系列方法。通过这些钩子函数，我们可以
阅读更多2024-12-14
安卓开发--使用android studio发布APP
app发布
阅读更多2024-12-14
数据结构与算法学习笔记----拓扑排序
@ author: 明月清了个风。
阅读更多2024-12-14
python 将数据保存到现有的Excel文件的新工作表
out_file = ‘query.xlsx’df1 = pd.DataFrame(out_data)若直接写入：df1.to_excel(out_file, index=False, sheet_n
阅读更多2024-12-14