【前端知识】React简单入门

概述

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库，其语法详细介绍如下：

一、基础概念

1. 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。

2. 组件：

   • React通过构建组件来使得代码更加容易复用，适用于大项目的开发。
   • 组件名的首字母必须大写。
   • 组件分为class组件（有状态组件）和函数组件（无状态组件）。
     • class组件：通过类的继承来创建，必须继承React.Component，必须有render方法，render方法中必须返回React元素（JSX）。
     • 函数组件：定义一个函数组件就是定义一个函数，建议使用箭头函数，函数的首字母必须大写，函数中必须返回React元素（JSX）。
   • 有状态组件写起来比较复杂，性能相对较低，但功能更全，可以在组件内部定义组件的状态；无状态组件写起来比较简单，性能相对较高，但功能相对简单，不能在组件内部定义组件的状态。

3. 单向响应的数据流：

   • React实现了单向响应的数据流，从而减少了重复代码，比传统数据绑定更简单。

二、核心语法

1. 状态（State）：

   • 主要用于更新界面。
   • 组件的State属性在生命周期函数getInitialState中初始化（class组件），或在组件外部通过useState钩子初始化（函数组件）。
   • 当调用组件的this.setState（class组件）或setState函数（函数组件）改变state时，组件会重新渲染刷新。

2. 属性（Props）：

   • 主要用于组件之间传递数据，即标签的属性。
   • 通过this.props（class组件）或函数参数（函数组件）访问传递进来的props。

3. 事件处理：

   • React中的事件绑定没有绑定到具体的DOM节点上，而是采用事件代理的模式绑定在根节点上。
   • React模拟了一套事件冒泡机制，通过事件源找到真实触发的元素，然后执行该元素上的事件处理函数。
   • 事件处理函数中会传入一个事件对象，该对象和普通的浏览器事件对象所包含的方法和属性基本一致，但它是React自己内部构建的。

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

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

1. 实例化：

   • getDefaultProps：作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。
   • getInitialState：返回一个对象，用于初始化组件的state。
   • componentWillMount：组件即将挂载到DOM之前调用，此时render方法尚未被调用。
   • render：创建虚拟DOM，该方法具有特殊的规则，如只能通过this.props和this.state访问数据，可以返回null、false或任何React组件等。
   • componentDidMount：组件挂载到DOM后立即调用，此时可以通过ReactDOM.findDOMNode(this)获取到组件的DOM元素。

2. 实例化完成后的更新（更新阶段与实例化阶段调用的生命周期方法相同，但触发时机不同）：

   • 当组件的props或state发生变化时，会依次调用getInitialState、componentWillMount、render、componentDidMount方法，但通常不需要在更新阶段重写getInitialState和componentWillMount方法。

3. 存在期：

   • componentWillReceiveProps：组件接收到新的props之前调用。
   • shouldComponentUpdate：组件接收到新的props或state之前调用，用于判断是否需要更新组件。返回true表示继续执行更新流程，返回false表示跳过更新流程，直接执行componentDidUpdate。
   • componentWillUpdate：组件即将更新之前调用，此时不能修改组件的state或props。
   • render：重新创建虚拟DOM。
   • componentDidUpdate：组件更新后立即调用，此时可以访问更新后的DOM元素。

四、样式设置

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

1. 内联样式：使用内联样式对象来设置样式，样式对象是一个JavaScript对象，其中的属性名是CSS属性，属性值是对应的样式值。
2. CSS模块化：通过将CSS文件与组件文件关联起来，可以实现样式的模块化和隔离。在组件中引入CSS模块化文件后，可以使用对应的类名来设置样式。
3. 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}><inputtype="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应用。