技术文章库 - 编程教程与技术分享平台
NodeJS 和 ReactJS 之间的区别
ReactJS和NodeJS都是当今广泛使用的高性能JavaScript子集。但两者在某些方面有所不同。在下面的文章中，我们将讨论两者之间的区别，以及哪个更适合用于构建Web应用程序以及原因是什么?NodeJS它是一个完全开源和跨平台的运行时环境，用于在浏览器之外执行JavaScript代码。NodeJs的事件驱动模型允许用户创建快速且可扩展的网络应用程序。关于NodeJS，
React.js 中的高阶组件
高阶组件简称hoc。它是一种接收一个组件并返回一个包含附加功能的新组件的模式。//hoc是一个自定义JavaScript函数的名称constAddOnComponent=hoc(SimpleComponent);我们使用带有state和/或props的组件来构建UI。类似地，hoc会根据提供的组件构建一个新组件。在React中使用hoc可以创建横切关注点。组件负责单
React.js 中的 Fragment
大多数情况下，我们需要从一个组件返回多个元素。ReactFragment可以帮助我们返回多个元素。另一种方法是使用div等HTML元素来包裹它们。但是使用额外的HTML节点可能会导致一些语义问题。React.Fragment示例render(){return(<React.Fragment><ElementA/><Eleme
React.js 中的转发 ref
将ref传递给子组件称为转发ref。React提供了一个createRef函数来为元素创建ref。forwardRef是一个将ref传递给子组件的函数。示例//ExampleRef.jsconstExampleTextInput=React.forwardRef((props,ref)=>(<inputtype="text"p
React.js 中的 Context API
ReactContextAPI在16.3或更高版本中可以安全地在生产环境中使用。添加ContextAPI的原因是为了避免在存在子组件链的情况下传递props。如果不使用ContextAPI，我们必须将props传递到所有中间组件。另一种解决方案是使用第三方库(例如Redux)来维护中央存储。理解props传递问题App.js→书籍props→BookLis
在 React.js 中处理表单
与Angular等其他库不同，React中的表单需要我们自行处理。React中有两种类型的表单输入受控输入非受控输入受控组件或元素是指由React函数处理的组件或元素。例如，在onChange函数调用时更新字段。大多数组件都以受控方式处理。受控表单组件示例importReact,{Component}from'react';classControlle
Formik 用于 React.js 中的表单处理
Formic的目的是消除React中表单处理的复杂性，并使表单提交更简单。Formic使用yup来验证表单字段，使用起来非常简单首先安装formic库npminstall–saveformic示例importReact,{Component}from'react';import{Formik,FormikProps,Form,F
React.js 中的错误边界
错误边界机制有助于在生产中向用户显示有意义的错误消息，而不是显示任何编程语言错误。创建一个React类组件importReact,{Component}from'react';classErrorBoundaryextendsComponent{state={isErrorOccured:false,errorMessage:''}
React.js 中的调试和错误边界
理解错误消息如果代码执行过程中出现错误，React会在屏幕上显示一条可读的错误消息，并附带行号。我们应该理解错误消息才能更正错误。下面有一个App.js文件，其中包含一个输入元素。当输入值发生变化时，控制台会显示文本"减号"。importReact,{Component}from'react';classAppextendsComponent{onChang
在 React.js 中创建函数式组件
让我们看看如何创建简单的React函数式组件组件是React库的构建块。组件有两种类型。有状态组件无状态组件有状态组件具有一个可在内部操作的本地状态对象。无状态组件没有本地状态对象，但我们可以使用ReactHooks在其中添加一些状态。创建一个简单的ES6函数constplayer=()=>{}这里我们使用const关键字来修饰函数名，以防止其被意外修改。让我们添加
React.js 路由基础知识
React路由的一些基础知识React-router是主库，react-router-dom和react-router-native是特定于环境的库。React-router-dom通常用于基于浏览器的Web应用程序。react-router-native用于可以使用react-native开发的移动应用程序。要安装它，请使用命令npminstall–sav
将 Bootstrap 添加到 React.js 项目
在React项目中添加Bootstrap的方法有很多种。使用BootstrapCDN安装Bootstrap依赖项使用ReactBootstrap包使用BootstrapCDN这是添加Bootstrap最简单的方法。与其他CDN一样，我们可以在React项目的index.html中添加BootstrapCDN。以下是其中一个ReactCDN网址&l
React.js 中的代码拆分
我们使用诸如webpack之类的工具打包React应用程序中的文件。打包过程最终会按文件导入的顺序合并这些文件，并创建一个单独的文件。这种方法的问题在于，打包文件会随着文件数量的增加而变大。用户可能无法加载所有功能组件，但打包过程中仍在加载它们，这可能会影响应用程序的加载。为了避免这种情况，React中使用了代码拆分。示例打包示例−//app.jsimport{tot
React.js 中的可访问性
React.js也支持HTML元素上的aria-*属性。其他属性通常使用驼峰命名法，但aria-*属性使用连字符命名法。<inputtype=&"text&";aria-label={labelText}aria-required=&"true&";onChange={changeHandler}value={inputValue}na
React.js 中的组合与继承
组合和继承是React.js中组合使用多个组件的方法。这有助于代码复用。React建议尽可能使用组合而不是继承，并且继承应该只在非常特殊的情况下使用。理解它的示例−假设我们有一个用于输入用户名的组件。继承classUserNameFormextendsReact.Component{render(){return(<div>
在 React.js 中使用表单
在简单的html表单中，表单元素在内部保留值并在表单提交按钮上提交。示例<!DOCTYPEhtml><html><head><title>FormExample</title></head><body><form><label>UserName:<inputt
React.js 中的条件渲染
使用条件语句可以渲染和移除特定组件。JavaScript和React.js中的条件处理机制类似。示例functionDisplayUserMessage(props){constuser=props.user.type;if(type==’Player’){return<h1>Player</player>;}If
在 React.js 中处理事件
事件的编写语法上有一些差异，但处理方式与DOM元素事件处理类似。事件处理程序的名称采用驼峰式命名法。示例简单HTML中的事件−<buttononclick=”addUser()”>AddUser</button>EventinReactwithjsx:<buttononClick={addUser}&g
使用 React.js 显示 hello world
create-react-app是一个使用默认配置创建React.js项目的命令。Create-react-app有助于运行React应用程序。该命令将在npm或yarn上执行。如果计算机上已安装npm和node.js，请使用命令−全局安装create-react-app。npminstall–gcreate-react-app创建项目
如何在 React Native 中显示 Material Chip View?
要在UI中显示芯片，我们将使用ReactNativePaperMaterialDesign。按如下所示安装reactnativepaper−npminstall--save-devreact-native-paper芯片组件在UI上的外观如下−基本芯片组件如下−<Chipicon="icontodisplay
