讯享网

                <p id="1VS8C6TJ">React是一种用于开发交互式用户界面的JavaScript库。React还可用于开发单页应用程序（SPA），从而提高应用程序性能。</p><p id="1VS8C6TK">关注我带你了解科技领域最新的技术与产品。<br/></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0730%2Fab883006j00ryl9e00010c000rs00bom.jpg&thumbnail=660x2147483647&quality=80&type=jpg"/><br/></p><p>最初作为前端JavaScript库开发，随着时间的推移，React已经发展成可以用于开发服务器端渲染以及移动应用程序。例如，React Native用于开发iOS和Android移动应用。<br/>React的发展<br/>React由Facebook（现在称为Meta）的软件工程师Jordan Walke开发。Jordan Walke最初创建了一个名为'FaxJS'的原型。'FaxJS'首次部署在2011年的Facebook新闻动态中。2012年，Facebook收购了Instagram，并将'FaxJS'部署到了Instagram上。<br/>2013年5月，React在美国的JSConf上正式发布，并成为开源项目。React由Facebook（现在称为Meta）维护，用于创建交互式的Web界面。<br/>2015年2月，在React大会上，Facebook宣布了React Native的创建，后来在2015年3月成为开源项目。React Native用于开发iOS和Android应用程序。<br/>2017年4月18日，Facebook宣布了一组名为React Fiber的新渲染算法。这种创新改进了以前被称为“Stack”的算法。'Stack'在渲染动态变化时速度较慢。与此同时，使用Fibers，页面的结构被分割成片段，这样就可以方便地独立维护和更新。<br/>React的结构<br/>在本节中，我们将介绍React的结构组成。我们将按照官方推荐的流程创建适用于开发的React应用程序。让我们开始吧。<br/>官方文档建议在学习React或创建新的单页应用程序时使用Create React App。示例：<br/>C:UsersUsernameDesktopproject_folder&gt;npx create-react-app my-app<br/>创建了React应用程序之后，您的项目应该如下所示的文件结构。<br/>my-app/<br/>node_modules/<br/>public/<br/>favicon.ico<br/>index.html<br/>src/<br/>App.css<br/>App.js<br/>App.test.js<br/>index.css<br/>index.js<br/>logo.svg<br/>.gitignore<br/>package.json<br/>README.md<br/>现在，让我们探索上述文件和文件夹，并了解它们的用途。<br/>node_modules文件夹<br/>此文件夹包含项目所需的所有软件包和依赖项。当您安装这些依赖项和软件包时，它们会被下载并复制到node_modules文件夹中。请注意，由于该文件夹太大，建议不要将此文件夹提交到您的版本控制存储库中。<br/>public文件夹<br/>public文件夹包含index.html文件，您可以在其中设置页面标题和元标记。您可以在public文件夹中添加其他资产，例如样式表、脚本、图像和字体。<br/>请注意以下几点：<br/>Webpack不会处理public文件夹。<br/>使用名为PUBLIC_URL的环境变量来引用public文件夹中的资产。例如，在index.html文件中使用它：<br/></p><p>JavaScript语法扩展<br/>JavaScript语法扩展（JSX）也称为JavaScript XML，是一种JavaScript功能，允许我们在JavaScript代码中编写HTML元素。以下代码是JSX的一个示例。<br/>const listItems = {<br/><ul><li style="list-style: none"><br/></li><li id="1VS8C6U1">Item 1</li><li style="list-style: none"><br/></li><li id="1VS8C6U2">Item 2</li><li style="list-style: none"><br/></li><li id="1VS8C6U3">Item 3</li><li style="list-style: none"><br/></li><li id="1VS8C6U4">Item 4</li><li style="list-style: none"><br/></li></ul><br/>Babel库——JavaScript编译器——将HTML元素转换为纯JavaScript。JSX的重要性在于它简化了JavaScript代码，使其易于阅读，特别是对于熟悉HTML的人来说。<br/>Props<br/>React中的Props代表属性。它们是传递给React组件的参数，就像HTML属性一样。<br/>上面的代码是一个包含一些属性（src、width和height）的HTML图像标签。这些属性决定了图像的呈现方式。Props也是如此。它们是传递给组件的函数参数。Props是只读的，因此不能修改。让我们看一个关于props的简单示例。<br/>在上面的代码中，Car元素具有一个属性–brand。<br/>函数Car(props){<br/>return(<br/>The Car brand is {props.name}<br/><br/>export default Car;<br/>接下来，为了渲染我们的属性，Car组件接收一个参数–props–可以是您选择的任何名称，如上面的代码所示。<br/>简而言之，props存储了由React组件的子组件访问的数据。<br/></p><p id="1VS8C6TO">React中的状态（States）是存储组件数据或信息的对象。与Props不同，状态是可变的，可以根据用户请求进行修改。当状态被修改时，React会重新渲染浏览器上的组件。让我们看一个状态的例子。<br/>javascript<br/>import React from "react";<br/>class Car extends React.Component {<br/>constructor(props) {<br/>super(props);<br/>this.state = {<br/>brand: "Toyota",<br/>model: "Mustang",<br/>color: "Red",<br/>year: "1964"<br/>};<br/>}<br/>changeBrand = () =&gt; {<br/>this.setState({ brand: "Honda" });<br/>};<br/>render() {<br/>return (<br/></p><p id="1VS8C6TP">The Car brand is {this.state.brand}</p><p><br/>Click<br/></p><p><br/><br/>export default Car;<br/>上面的代码显示了如下的屏幕截图：<br/></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0730%2Fbe8ad00cj00ryl9e00005c000ch006cm.jpg&thumbnail=660x2147483647&quality=80&type=jpg"/><br/></p><p>state<br/>当用户点击按钮时，根据代码中指定的内容，Toyota会更新为Honda。<br/>请注意以下几点：<br/>状态对象可以存储任意数量的属性。<br/>状态对象是可变的，即可以根据用户请求进行修改。<br/>使用setState方法来改变状态对象。<br/>React Hooks<br/>Hooks是一些函数，提供对状态和其他React功能的访问。借助React Hooks，不再需要使用类组件。<br/>Hooks是在React版本16.8中引入的新功能。让我们来看一些这些React Hooks。<br/>useState Hook<br/>useState是一种用于跟踪状态的函数式Hook。useState接受一个初始值，并在用户请求时进行更新。<br/>javascript<br/>import { useState } from 'react';<br/>function App() {<br/>const [count, setCount] = useState(0);<br/>const handleClick = () =&gt; {<br/>setCount(count + 1);<br/>return (<br/></p><p id="1VS8C6TS">You clicked me {count} times</p><p><br/>Click me<br/><br/>export default App;<br/>上面的代码显示了如下的屏幕截图：<br/></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0730%2Ff138932ej00ryl9e00005c000ca006nm.jpg&thumbnail=660x2147483647&quality=80&type=jpg"/><br/></p><p>useState hook<br/>上面的示例使用useState钩子接受一个初始值0，并在用户点击按钮时增加该值。<br/>useEffect Hook<br/>useEffect是一种执行副作用的钩子，例如从后端服务器获取数据、更新DOM、定时器等。useEffect接受两个参数：一个函数和一个依赖项（可选）。<br/>javascript<br/>import { useEffect } from 'react';<br/>useEffect(() =&gt; {<br/>// 每次渲染之后执行<br/>}, []);<br/>上面是一个带有依赖项为空数组的useEffect钩子结构的示例。<br/>其他React Hooks包括：<br/>useContext<br/>useRef<br/>useReducer<br/>useCallback<br/>useMemo<br/>自定义Hooks<br/>React的好处<br/>React具有广泛的好处，可以用于多种目的。让我们来看一些好处。<br/>Web应用程序开发：React可以用于开发具有后端服务器的网站，使用React框架。其中一些框架包括Next.js、Gatsby、Remix等。<br/>移动应用程序开发：React可以用于开发移动应用程序（iOS和Android），使用React Native。<br/>单页应用程序：React可以用于创建单页应用程序（SPA）。SPA在单个页面上呈现动态内容，减少加载时间并提高性能。<br/>需求量大：React是最广泛使用的JavaScript库，用于开发交互式用户界面，因此对React开发人员的需求量很高。<br/>易于维护：React应用程序使用独立组件开发。这些组件类似于JavaScript函数，但在独立模块中工作并返回HTML元素。因此，使得React易于阅读和维护。<br/>可重用性：React组件是可重用的。换句话说，React组件可以在应用程序的多个部分中重复使用，从而减少需要编写的代码量，实现快速开发。<br/>总结<br/>本文帮助我们了解了React的基础知识。了解React的基本原理对于成为专业的React开发人员来说至关重要。本文中，我们学习了React的概述、历史、结构、特点以及React的好处。还有更多深入的React内容等待您去探索和实践，让您不断提升React的专业技能和经验。<br/></p>