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

React 是什么？有什么特性？有哪些优势？

news 文章来源：https://blog.csdn.net/wbskb/article/details/135362869 2024/11/5 20:37:21

一、是什么

React，用于构建用户界面的 JavaScript 库，只提供了 UI 层面的解决方案

这句话的意思是，React 是一个专注于构建用户界面的 JavaScript 库，它主要关注于解决 UI 层面的问题。它并不是一个全功能的框架，而是提供了一种有效的方式来组织和渲染用户界面。React 的主要目标是提供一种可组合、可重用的组件化开发模式，以及高效的界面更新算法。

相对于一些全功能的框架，如 Angular 或 Vue.js，React 更专注于 UI 层面的问题，如组件化、虚拟 DOM 管理和状态管理。它并不包含诸如路由、状态管理、表单验证等功能，这些功能可以通过与其它库的结合来实现。

React 的设计哲学是将用户界面拆分成独立且可复用的组件，通过组件之间的组合来构建复杂的界面。它通过虚拟 DOM 技术来高效地更新界面，以保证性能。因此，React 提供了一种专注于构建用户界面的解决方案。

React 遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效

使用虚拟DOM来有效地操作DOM，遵循从高阶组件到低阶组件的单向数据流

帮助我们将界面成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，构成整体页面

react 类组件使用一个名为 render() 的方法或者函数组件return，接收输入的数据并返回需要展示的内容。

index.tsx

const ReactComprehend = () => {return <>reactComprehend</>;
};export default ReactComprehend;

App.tsx

import ReactComprehend from "../pages/reactComprehend";function App() {return <ReactComprehend></ReactComprehend>;
}export default App

二、特性

React特性有很多，如：

JSX语法

JSX 是一种 JavaScript 语法扩展，主要用于 React 框架。它允许你在 JavaScript 代码中直接编写 HTML 结构，使得代码更具可读性和可维护性。

JSX 的基本语法规则如下：

JSX 标签的名称（例如 <div>、<ReactComponent>）使用驼峰式命名，而不是 HTML 的标准小写。
标签的属性可以包含在 JavaScript 表达式中，使用大括号 {} 包裹。例如：<div style={{ color: 'red', fontSize: '18px' }}>Hello, world!</div>
标签可以嵌套，并且可以使用 JavaScript 表达式来控制嵌套的元素数量。例如：<div>{5}</div> 会渲染出5个 <div> 元素。
JSX 中的 JavaScript 表达式必须被包裹在大括号 {} 中，不能使用小括号 ()。例如：<div>{5 + 3}</div> 是正确的，而 <div>{5+3}</div> 是错误的。
JSX 中的 JavaScript 表达式不能包含分号 ;，也不能包含任何非 JavaScript 表达式的内容。
JSX 中的 JavaScript 表达式不能包含未闭合的括号 (、方括号 [ 或花括号 {，因为这会破坏 JSX 的语法。

在将 JSX 代码转换为实际的 HTML 或 JavaScript 时，可以使用 Babel 这样的工具进行转换。Babel 会将 JSX 代码转换为普通的 JavaScript 代码，以便在浏览器中运行。

单向数据绑定

React中的单向数据绑定是指数据流从上至下，从父组件流向子组件。父组件负责传递数据给子组件，子组件根据这些数据进行渲染。这种数据流方式有助于简化组件间的关系，提高代码的可维护性和可读性。

在React中，可以使用props来实现单向数据绑定。父组件将数据作为props传递给子组件，子组件通过props接收这些数据，并在render方法中使用它们进行渲染。子组件不能直接修改从父组件接收的数据，如果需要修改数据，应该通过事件回调或者状态管理工具（如Redux）来通知父组件进行更新。

这种单向数据流的设计模式有助于降低组件间的耦合度，使得组件更易于测试和维护。同时，它也有助于提高应用程序的性能，因为父组件可以控制子组件的数据更新，避免了不必要的重新渲染和DOM操作。

import React from 'react';  // 父组件  
class ParentComponent extends React.Component {  constructor(props) {  super(props);  this.state = {  message: 'Hello, world!'  };  }  handleClick = () => {  this.setState({ message: 'Hello, React!' });  }  render() {  return (  <div>  <h1>{this.state.message}</h1>  <button onClick={this.handleClick}>Change Message</button>  <ChildComponent message={this.state.message} />  </div>  );  }  
}  // 子组件  
class ChildComponent extends React.Component {  render() {  return (  <div>  <h2>{this.props.message}</h2>  </div>  );  }  
}  export default ParentComponent;

在上面的代码中，ParentComponent是一个父组件，它维护了一个状态message，并通过render方法将message作为prop传递给ChildComponent。当用户点击按钮时，ParentComponent会触发handleClick方法，更新message的状态，并通过重新渲染来更新UI。由于数据流是单向的，ChildComponent不能直接修改从父组件接收的数据。如果需要修改数据，应该通过事件回调或者状态管理工具来通知父组件进行更新。

虚拟DOM

在React中，虚拟DOM是一个概念，它允许React使用一个与实际DOM相似的数据结构来表示组件的状态。React使用虚拟DOM来优化DOM操作，提高应用程序的性能。

当组件的状态发生变化时，React会创建一个新的虚拟DOM，并将其与旧的虚拟DOM进行比较。通过这种方式，React可以准确地找出实际需要更新的部分，而不是对整个页面进行重新渲染。这种比较过程称为“Diffing”，它会找到两个树之间的最小差异，并只更新这些差异，而不是重新渲染整个组件。

React使用JavaScript来创建虚拟DOM，而不是直接操作DOM。这种抽象化简化了组件的开发过程，并使得组件更容易测试和维护。通过使用虚拟DOM，React能够避免不必要的DOM操作，提高应用程序的性能。

总之，虚拟DOM是React中的一个重要概念，它使得React能够高效地更新页面上的内容，同时保持组件的可维护性和可测试性。

声明式编程

以下是一个简单的React组件示例，展示了声明式编程的用法：


import React from 'react';  // 声明式组件  
function Welcome(props) {  return <h1>Hello, {props.name}</h1>;  
}  // 父组件  
class ParentComponent extends React.Component {  constructor(props) {  super(props);  this.state = { name: 'React' };  }  handleClick = () => {  this.setState({ name: 'React Developer' });  }  render() {  return (  <div>  <Welcome name={this.state.name} />  <button onClick={this.handleClick}>Change Name</button>  </div>  );  }  
}  export default ParentComponent;

代码中，Welcome组件是一个声明式组件，它描述了一个简单的欢迎消息。它接收一个name属性，并将其显示在标题中。父组件ParentComponent使用Welcome组件，并通过状态name传递数据。当用户点击按钮时，父组件的状态会更新，并触发重新渲染。React会自动处理DOM操作，更新界面上的内容。这种声明式编程范式使得代码更加简洁和可维护，并且避免了不必要的DOM操作。

在React中，声明式编程是一种重要的编程范式。通过声明式编程，开发者可以描述他们想要的结果，而不是详细说明如何实现这个结果。React使用虚拟DOM来优化DOM操作，提高应用程序的性能。

在React中，组件是声明式编程的基本单位。组件描述了用户界面的某个部分，并使用props来接收数据和状态。通过组件，开发者可以描述应用程序的界面，而不需要关心如何渲染这些组件。

当组件的状态发生变化时，React会自动重新渲染组件，并使用虚拟DOM进行Diffing操作。Diffing会找出新旧虚拟DOM之间的最小差异，并只更新这些差异，而不是重新渲染整个组件。这种声明式编程范式使得React能够高效地更新页面上的内容，同时保持组件的可维护性和可测试性。

总的来说，在React中，声明式编程使得开发者能够更专注于解决问题本身，而不是陷入细节中。通过使用组件和虚拟DOM，React提供了强大的工具来描述用户界面，并自动处理DOM操作，从而提高应用程序的性能和可维护性。

Component

在React中，组件（Component）是一个独立的可重用的界面部分。它定义了如何渲染界面的一部分，包括它的样式、属性和子组件。

React中的组件可以分为两种类型：函数组件和类组件。函数组件是一种简单的组件，它接收props作为输入，并返回一个React元素。函数组件通常用于简单的UI元素，如按钮或文本。类组件是使用ES6类语法定义的组件，它提供了更多的功能，如状态管理和生命周期方法。类组件通常用于更复杂的UI组件，如表单或导航菜单。

在React中，组件是构建用户界面的基本单位。通过组合和嵌套多个组件，可以构建出复杂的用户界面。组件还可以接收props作为参数，以传递数据和属性给子组件。这使得组件具有很高的可重用性和可维护性，可以在不同的应用程序中重复使用。

总的来说，在React中，组件是构建用户界面的核心概念。通过使用组件，可以构建出可重用、可维护和易于测试的用户界面。

三、React 存在的优势

高效性能：React使用虚拟DOM，通过Diffing算法来最小化DOM操作，提高了应用程序的性能和响应速度。
组件化开发：React采用组件化的开发方式，使得代码更加模块化、可重用性和可维护性。
跨平台兼容：React可以在多种平台上运行，包括Web、Native、桌面应用程序等，这使得开发人员可以更轻松地构建跨平台应用程序。
丰富的生态系统：React拥有庞大的社区和丰富的第三方库，使得开发人员可以快速构建复杂的应用程序。
易学易用：React语法简洁明了，使得开发人员可以快速上手并构建出高质量的应用程序。
标准化：React遵循Web标准化的原则，使得开发人员可以更好地遵循最佳实践，并与其他Web技术无缝集成。
声明式编程：React采用声明式编程范式，使得开发人员能够更专注于描述应用程序的状态和行为，而不是陷入底层的DOM操作中。这有助于提高代码的可读性和可维护性。
灵活的组件架构：React的组件架构非常灵活，允许你使用函数式和类组件两种方式进行开发。这为开发者提供了更大的自由度和选择空间，可以根据项目需求选择最适合的组件开发方式。
状态管理：React提供了一个内置的状态管理机制，使得开发者可以方便地管理组件内部的状态。通过状态更新，可以自动触发重新渲染，简化了组件之间的数据传递和同步。
社区支持：React拥有庞大的开发者社区，提供了丰富的资源和支持。无论遇到什么问题，你都可以在社区中找到解决方案或者得到其他开发者的帮助。
兼容性好：React具有良好的兼容性，可以在不同的浏览器和平台上运行，无需担心兼容性问题。此外，React还支持与各种第三方库和框架集成，如Redux、GraphQL等，使得开发人员可以更加灵活地构建复杂的应用程序。
性能优化：React内置了性能优化功能，如虚拟DOM和Diffing算法，使得应用程序在运行时更加高效。此外，React还提供了各种性能监控和调试工具，帮助开发者优化应用程序的性能。