React App和React组件之间的区别是什么
React App和React组件是React框架中的两个重要概念，它们之间有以下区别：
- 定义和作用：
- React App是一个完整的React应用程序，它由多个React组件组成，用于构建用户界面和处理应用逻辑。
- React组件是React应用程序的构建块，用于封装可重用的UI元素和逻辑。
- 结构和层级：
- React App通常由多个React组件组成，形成一个层级结构。通常，一个React App由一个根组件开始，然后通过嵌套其他组件来构建整个应用程序。
- React组件可以是根组件，也可以是其他组件的子组件。组件之间可以形成层级关系，通过组合和嵌套来构建复杂的UI。
- 功能和复用性：
- React App负责整个应用程序的逻辑和功能，包括路由管理、状态管理、数据请求等。它通常是一个独立的、可复用的应用程序。
- React组件负责封装特定的UI元素和逻辑，可以在不同的应用程序中重复使用。组件的复用性是React框架的核心特性之一。
- 渲染和使用：
- React App通过ReactDOM.render()方法将整个应用程序渲染到HTML文档中的一个DOM元素上。
- React组件通过在其他组件中引用或嵌套来使用。组件可以在其他组件的render()方法中返回，也可以通过JSX语法直接在其他组件中使用。
总结起来，React App是一个完整的React应用程序，由多个React组件组成，负责整个应用程序的逻辑和功能。而React组件是React应用程序的构建块，用于封装可重用的UI元素和逻辑。它们之间的区别在于功能范围、复用性和层级结构。
相关·内容
几天后，我才开始在“反应”中工作，我对以下内容感到困惑：
如果每个react组件的状态都与该组件的作用域隔离，或者只有一种状态用于完整的app？
组件函数和正常函数之间的区别是什么？它是返回值吗？
component = () => ( //jsx元素)；
const = () =>‘返回值’；
谢谢。
浏览 0提问于2018-07-26得票数 0
回答已采纳
我想将我的home.jsx文件内容显示为app.js文件。
我使用React作为前端(不是react本地的)和Symfony 5作为后端。稍后，我的最终目标是一个简单的按钮。
有可能吗？我不知道我犯了什么错。我创造了一个奖金的app.jsx。
这是我的档案：
浏览 1提问于2020-05-20得票数 0
回答已采纳
1回答
对于“请在我的代码中找到bug”的问题表示歉意，但我正在努力应付React。
我试图将名为hashRoute的变量传递给react中的组件，但是每当我试图在组件呈现方法中使用this.props.route访问道具时，都会收到一个浏览器警告：
“警告:标签上未知的道具route。从元素中删除此道具。
我的组成部分：
var App = React.createClass({
render: function(){
var Child;
switch(this.props.route)
{
case '
浏览 2提问于2017-03-23得票数 1
回答已采纳
我遵循了一个关于React的教程( -日期为2019年1月3日)，并用npx create-react-app *app_name*创建了一个React应用程序。此命令在我的计算机上生成的App.js文件与此命令为提供教程的人生成的文件不同。React从那以后改变了吗?还是我下载的东西有问题？
我的App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
浏览 1提问于2019-06-20得票数 33
回答已采纳
在React中，关于useEffect()钩子，我们得到：
“useEffect排定的效果不会阻止浏览器更新屏幕”。
Tip
与componentDidMount或componentDidUpdate不同，useEffect计划的效果不会阻止浏览器更新屏幕。
这到底是什么意思？
示例：设想我有以下内容：
受控输入
以及第一次呈现后的useEffect，它会执行一些昂贵的同步计算。
function App() {
const [inputValue,setInputValue] = React.useState('');
useEffect((
浏览 0提问于2019-07-10得票数 7
我已经写了一个代码，点击链接路由到视图。但这些联系并没有消失。请指导我如何才能让视图显示，而不是链接。我正在分享图片以获得更多的澄清
App.js
import React, {Component} from 'react';
import {BrowserRouter, Route, Link, Routes} from 'react-router-dom';
import Buyer from './Container/Buyer/Buyer';
import Seller from './Container/Seller/Sel
浏览 2提问于2021-11-07得票数 0
1回答
我最近偶然发现了这种行为，并试图了解其原因。基本上，到目前为止，我注意到的是，将在其父组件的状态更改上挂载和卸载一个React子组件。但是，包含相同子组件的jsx不会。
我把这个简化的例子放在一起来演示这种行为。
const Child = ({ title }) => {
const [count, setCount] = React.useState(0);
const increment = () => setCount((x) => x + 1);
return (
<button onClick={increment}>
浏览 4提问于2022-05-10得票数 0
回答已采纳
我正在构建一个Express-React-Node应用程序，我希望将其部署到Google app Engine上。 当我遵循几个教程时，我遇到了这两个应用程序的架构： https://github.com/BalasubramaniM/react-nodejs-passport-app/tree/master/src 和 https://hackernoon.com/m-e-r-n-stack-application-using-passport-for-authentication-920b1140a134 我想了解它们之间的区别。 第一个是只有一个带有Webpackand和Babel的应
浏览 22提问于2019-09-14得票数 0
回答已采纳
我是React.js的新手，我认为这个问题很简单，但我找不到一个简单的解决方案。我试图使用函数而不是类，我不知道如何将这些函数作为组件在主函数中使用。让我更好地解释：
I有一个名为"App.js“的主函数，我想使用它作为”App.js“中的一个组件，名为”App.js“。
遵循以下代码：
APP.JS
import React from "react";
import { DivPrincipal} from "./styles";
import {Menu} from "../../components/Menu/ind
浏览 4提问于2020-09-09得票数 0
下面有一个名为TestComponent的组件，我想问一下使用React.render在同一个页面中呈现测试组件和使用App.js中的TestComponent呈现测试组件有什么区别
场景1
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class TestComponent extends Component {
componentDidMount(){
console.log("Great");
}
render() {
浏览 1提问于2018-06-22得票数 1
回答已采纳
我在读“反应”的16个特征。我坚持下面的观点。请各位澄清以下几点。
setState回调(第二个参数)现在在componentDidMount / componentDidUpdate之后立即触发，而不是在所有组件呈现之后触发。
当下面的代码在react的两个版本中执行时，会有什么不同，即< 16和16。
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Com
浏览 2提问于2017-11-18得票数 4
1回答
我希望实现一个由基本字段(例如:产品名称、价格和类型)组成的表单，然后根据所选类型实现特定类型的字段。
最初，解决方案似乎很简单()，因为我设法根据在当前product状态中找到的类型呈现不同的组件。
但是，由于这些组件是在内部使用钩子(如useEffect )时有条件地呈现的，所以当我从一种产品类型更改为另一种产品类型时，它们会破坏并导致以下错误：
Should have a queue. This is likely a bug in React. Please file an issue.
Warning: React has detected a change in the orde
浏览 3提问于2022-08-09得票数 0
我正在制作简单的google应用程序，由TypeScript通过世博会。这是我的剧本。它可以显示简单的地图视图。
import React, { useEffect, useState } from "react";
import GoogleMapReact from "google-map-react";
import {
View
} from 'react-native';
interface MapProps {
center: {
lat: number;
lng: number;
};
zoom:
浏览 3提问于2022-06-12得票数 1
1回答
我使用ReactDOMServer来呈现一个应用程序，我得到了以下错误：
我已经设置了表达在反应类型记录项目。我做错了什么？请帮帮我，谢谢。
以下是相关代码：
App.tsx
import * as React from 'react';
class App extends React.Component {
render() {
return (
<h1>Testing App Page</h1>
);
}
}
export default App
entry.js
require('igno
浏览 3提问于2020-03-12得票数 1
我使用的是React代码，像这样拆分
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/
浏览 6提问于2022-02-21得票数 0
回答已采纳
看来，我看到了两种通过道具委托财产的平等方式：
let App = React.createClass({
render(){
return (
<Unit someName="Push me!" />
)
}
});
class Unit extends React.Component{
render(){
return (
<button>
<span className="glyphicon gly
浏览 0提问于2016-08-19得票数 1
我正在创建一个页面，显示，然后编辑，租用信息使用om-引导。(我知道Clojure，但对CLJS/Om/React/现代web开发一般来说都是新手。)显示和编辑租户信息之间的UI和功能是相似的--两者都可以使用输入字段；编辑只需要字段是“文本”，而不是“静态”，需要“提交”和“取消”按钮。
我面临的问题是，我无法找到改变这样一个组件的React/Om方法。视图的定义如下：
(defcomponent view [{:keys [id] :as app} owner]
(render
[_]
(let [tenant (get @tenants id)]
(dom/di
浏览 3提问于2015-12-12得票数 0
回答已采纳
重组库中的纯()和React.PureComponent之间有什么区别？我猜他们本质上是在解决同样的问题。谁能澄清一下吗？
浏览 0提问于2018-09-28得票数 6
回答已采纳
3回答
当使用React时，在呈现组件时有什么不同(以及应该在什么时候应用每个方法)？
这是否以任何方式影响组件生命周期？或者影响组件中钩子的运行方式？
方法1：
class App extends React.Component {
...
function getComponent() {
return <Component />
}
render() {
return this.getComponent()
}
}
方法2：
class App extends React.Component {
...
render() {
retur
浏览 6提问于2020-02-08得票数 5
回答已采纳
我有一个(服务器端渲染)使用React & Redux构建的SSR应用程序。我还使用了可加载的库。该应用程序托管在Heroku上，并使用Cloudflare缓存。 在Heroku上，应用程序间歇性地以500错误结束，而我无法找到错误的根本原因。以下是错误消息 loadable-components: failed to synchronously load component, which expected to be available {
fileName: 592,
chunkName: 'home-route',
error: '
浏览 296提问于2021-02-02得票数 1
我有一个由WordPress预渲染的HTML页面和三个React组件：<App />、<Component />和<AnotherComponent />.
HTML页面中有两个ID div容器(div、id="component"和div id="anotherComponent")是分开的，我想在上面呈现React组件。他们也有共同的状态。我希望使用<App />编写所有逻辑和事件处理，然后将状态(this.props.counter)传递给每个组件。
我想对每个组件使用ReactDOM.render
浏览 3提问于2017-06-05得票数 6
回答已采纳
我试图在我的React应用程序中实现一个范围滑块，但当我输入代码时，滑块根本不起作用？ 它不会左右拖动。单击它也不会移动它。不过，如果我在codepen上使用完全相同的代码，滑块完全可以正常工作。 我试着研究过这个问题，但我找不到明确的答案。有人知道哪里会出问题吗？ 有问题的代码： <input
type="range"
min="1"
max="100"
value="50"
class="sl
浏览 22提问于2021-01-06得票数 1
1回答
我有一个简单的计数器应用程序
import * as ReactDOM from 'react-dom';
import * as React from 'react';
const app = document.querySelector('#root');
let count = 0;
const increment = () => {
count++;
render();
}
var as = {};
const render = () => {
var Component = () =>
浏览 0提问于2018-02-23得票数 2
2回答
我是Reactjs中的新手，我想知道“”和“”之间的区别是什么？
下面是反应性功能组件代码
import React from 'react'
export default function Test() {
return (
<div>Test</div>
)
}
这里是“导出”
import React from 'react'
function Test() {
return (
<div>Test</div>
)
}
export default Test
浏览 15提问于2022-07-21得票数 0
我对React 、React类型记录和React 有混淆。
我的想法是，我们使用应用程序，并为web应用程序使用React (Javascript，Typescript)。
有人能准确地画出他们之间的区别吗？他们使用哪个父库/框架？
像角度一样，我们可以使components，services在他们(反应JavaScript，反应类型转录和反应本土化)。
当我们简单地说React这是什么意思(原生的，类型的，还是Javascript的)？
浏览 2提问于2020-07-01得票数 16
回答已采纳
2回答
我使用React-Navigation和StackNavigator实现了一个导航栏，位于我的react本地应用程序的顶部，它以应用程序徽标为中心，在右边有一个菜单按钮。我不能让它占用标题容器的全部空间，但是左边总是有一个20 on的空白。
正如您在我的代码中所看到的，我已经将各种样式属性(如margin: 0、padding: 0、alignment: fill和width:100% )应用于headerStyle、headerContainerStyle和导航栏组件本身，但它们都没有起到任何作用。
App.js:
import React from 'react';
imp
浏览 1提问于2020-12-01得票数 3
回答已采纳
作为React和Material-UI的新手，我非常担心路由问题。
单击该按钮时，URL会更改，但由于某种原因，组件不会呈现。我已经尝试了StackOverflow上提供的几乎所有可能的解决方案。毫无办法。也许你能找到问题所在？
下面是我的代码：
import React from 'react'
import { Button } from '@material-ui/core'
import { BrowserRouter } from 'react-router-dom'
import { Link, LinkProps } from &
浏览 18提问于2019-07-15得票数 0
回答已采纳
我从react和es6开始，并试图确定
export const Voting = React.createClass({ ... })
和
class Voting extends React.Component { ... }
似乎我可以达到相同的预期效果与两者(当然，除非我是错误的)。如果没有区别的话，我想我更喜欢第二种格式，但我似乎不知道真正的区别是什么。将感谢您的任何和所有意见，谢谢！
浏览 3提问于2015-10-05得票数 1
回答已采纳
1回答
我使用了以下组件：
与React-导航一起使用。
我不明白为什么您看不到基于场景的选定组件。
它看起来像createStackNavigator，它不能正常工作，并且场景没有显示。
我哪里做错了？
代码：
链接：
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import Icon from 'react-native-vec
浏览 0提问于2018-07-03得票数 0
我的情妇有个问题，就是它没有出现？这是我第一次做一个网站项目，使用JS和React，所以我不知道到底是什么交易.我甚至试图通过抄袭教程中的代码来学习，我以前一直是这样做的，当我想学点东西的时候。但是没有一个错误或者什么，但是，当我运行这个项目时，它并没有出现。
这是..。
App.js
import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import { CssBaseline, Container, Grid, AppBa
浏览 9提问于2022-05-13得票数 0
2回答
不了解ES6吗？
、、、
我对reactjs非常陌生，我正在复制一个教程(链接：)。我目前在Windows上，并在cmd上执行了以下操作(如教程所示)：
npm i -g create-react-app@1.5.2
create-react-app
文件/目录等都已安装，但我注意到我的App.js具有以下语法：
function App()
{
return(...);
}
虽然本教程中的App.js (和许多其他演示程序)使用这种语法，但据我所知，它是ES6：
class App extends Component
{
render()
{
return(...);
浏览 2提问于2019-06-20得票数 0
回答已采纳
这是我的App.js
import React from 'react';
import './App.css'
import Tools from './components/class/Tools'
import Loading from './components/inc/Loading'
export default class App extends React.Component {
componentDidMount() {
Tools.showLoading();
}
r
浏览 0提问于2021-06-17得票数 0
2回答
我正在开发一个演示应用程序，我有一个受控的搜索输入。我试图解除onChange事件的影响，使其不会在每个笔划上触发API fetch函数。它可以工作，但是我得到了一个关于依赖数组的警告： import React, { useState, useEffect, useCallback } from 'react';
import debounce from 'lodash/debounce'
[...]
const searchForMovies = (str) => {
fetch(`https://api.themoviedb.org/3
浏览 102提问于2020-11-21得票数 1
1回答
根据路由设置反应组件状态的标准方法是什么？我有以下React/主干示例：
var myApp = React.createClass({
render: function() {
return (
<div className={this.state}></div>
);
}
})
var App = Backbone.Router.extend({
routes: {
"": "home",
"create": "create"
}
});
浏览 0提问于2013-11-07得票数 9
回答已采纳
大家好，我正在尝试学习ReactJ，所以我想做一个基本的应用程序，当我点击左边的按钮时，Quote组件会显示" left“和" right”。我试图不使用类来做到这一点，我知道有10000种方法可以做得更好，但我想知道为什么它“不起作用” 下面是我的文件： App.js import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import Cards from './components/Car
浏览 34提问于2020-04-19得票数 0
1回答
我把打字稿添加到我的反应本地应用程序中，
在App.tsx中
我在上得到了这个错误，找不到名称-- React$Node on
const App: () => React$Node = () => {
...
}
浏览 5提问于2020-04-24得票数 5
3回答
当使用React React路由器时，我在一些安装问题中运行。这甚至可能不是React路由器本身的问题。我想向您传递一些附加数据和子路由。这似乎是可行的，然而，主页面上的更改触发了每次状态更改时重新挂载的孙辈。
为什么这只会发生在孙辈身上而不仅仅是孩子身上？
代码示例：
import React, { useEffect, useState } from 'react';
import { Route, Switch, BrowserRouter as Router, Redirect } from 'react-router-dom';
const Mai
浏览 2提问于2020-10-09得票数 7
回答已采纳
1回答
我和一个球员一起工作。我正在开发一个网站的反应，并希望使用片段的视频播放器使用在一些网页。所以我用这些代码创建了videoFr.js脚本。
import React from 'react'
import '../styles/video.scss';
const fragmentPlayer =(props)=> {
return (
<>
<iframe
width="560"
height="315"
src={props.
浏览 6提问于2020-03-14得票数 0
回答已采纳
1回答
在引入memo和hook之前，所有的功能组件都是无状态的。
在介绍了memo和hook之后，我对这两个概念有点困惑。
是React.memo，用于只使用钩子的函数。
是否应该将(所有无状态功能组件)更新为React.memo以进行优化？还是在函数不自动使用钩子时对其进行优化？
浏览 1提问于2019-10-28得票数 0
回答已采纳
我尝试在react native中设置scrollview段，并且我已经设置了可滑动的标签
下面是我的代码
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
ScrollView,
Text,
View,
Image
} from 'react-native';
import { Container, Icon, Left, Header, Body, Title, Right, Content, Footer,
Segment, FooterTab,
浏览 0提问于2018-09-28得票数 0
我曾经历过几个类似的问题，但找不到有用的东西。我试图从react路由器引入BrowserRouter，但它说：
模块‘./节点_模块/@类型/反应-路由器’‘没有导出成员'BrowserRouter’
根据这里的另一个类似问题，我安装了npm的@type/ dev和@type/dev路由器，但将其保存为dev依赖项。它们已经在我的package.json中了，但作为常规的依赖项。在此之前，他们在做“反应”的进口反应时，也给出了类似的问题。它会说，这些模块是找不到的，同样的路由器。然后，当我安装时，这些错误消失了，但是BrowserRouter开始显示这个错误。我也试过“反应-路由器-多
浏览 0提问于2019-09-11得票数 4
回答已采纳
2回答
当我设置并通过路由进行更改时，路由就会继续添加Infront。
示例：-如果我在http://localhost:3001/login页面上，并单击“注册链接”，则在前面添加register路由，如==> http://localhost:3001/login/register
有人能告诉我我做错了什么吗？
码
App.js
import "./App.scss";
import { Routes, Switch, Route } from "react-router-dom";
import Home from "./components/Ho
浏览 4提问于2022-07-02得票数 1
回答已采纳
我在一个项目中使用react-google-maps库，我找到了一个很好的例子来满足我的需求。它是下面的代码，正如您所看到的，它是一个类组件。
class Map extends Component {
constructor(props){
super(props);
this.map = React.createRef();
}
render() {
const MyGoogleMap = withScriptjs(
withGoogleMap(props => (
<GoogleMap
re
浏览 1提问于2019-09-18得票数 1
回答已采纳
1回答
我正在学习反应，并且遇到了一些麻烦。
我有多个页面/组件，每个页面都有一个表单，一旦提交，我就编写了一个函数来处理表单输入。
但是，我想将这个函数移动到它自己的组件中，这样，当表单提交时，每个页面都只调用这个组件。
我的问题是如何用REACT来完成这个任务，我已经找了好几个小时了，只是想不出答案。
下面是两个示例组件：
表单处理程序/表单处理
'use strict';
import React from 'react/addons';
const FormProcessing = React.createClass({
_test: func
浏览 1提问于2015-10-15得票数 4
React newb -请温柔点。
因此，我通过create-react-app创建了我的第一个空react项目。在网站的主页上提供了示例代码片段，我将其合并到了我的空项目中。现在我不确定关于导出内容的react约定是什么，比如：
export default App
坦率地说，我在react文档中找不到与此相关的文档。您能根据相关文档向我解释或指出正确的方向吗？
谢谢!
浏览 1提问于2018-03-22得票数 0
3回答
我刚从电子开始，我一直很难把反应路由器和它结合起来。不管我做什么，我都会收到警告：
Warning: [react-router] Location "/" did not match any routes
路由器：
"use babel"
import React from 'react'
import { Router, hashHistory } from 'react-router'
/* ******************
IMPORTS
*********************/
import {ro
浏览 7提问于2017-02-22得票数 0
回答已采纳
1回答
我刚刚开始玩表达和反应，并与最简单的项目有问题。有人能看一眼让我知道我可能错过了什么吗？
server.js
const express = require('express')
const bodyParser= require('body-parser')
const app = express()
app.use(bodyParser.urlencoded({extended: true}))
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.h
浏览 1提问于2017-06-15得票数 0
我正试着用react-router和typescript在我的网站上做一个导航。但是它不起作用，我得到的不是主页，而是一个空页面
这是我的app.tsx文件
// app.tsx
import * as React from 'react';
import '../App.css';
class App extends React.Component<any,any> {
public render() {
return (
<div>
{this.props.children}
浏览 2提问于2018-05-21得票数 0
正如我注意到的，create-react-app似乎改变了基于函数组件的app.js类组件，
知道他们为什么这么做吗？
浏览 1提问于2019-09-24得票数 10
回答已采纳
我完全是一个来自Angular Typescript背景的反应新手。我选择用Typescript学习React是为了让我的转换比用javascript学习react更容易。谁能让我知道很好的基础视频反应与打字。有关于复数视线的基本视频，但可以使用javascript演示它。
我已经使用create- react -app命令创建了一个应用程序，其中包含react项目的框架。
我注意到这个文件有下面的const声明，而我在视频中看到的例子显示了一个带有render方法的类声明。有人能解释一下吗？
Scafolded输出
import React from 'react';
imp
浏览 2提问于2019-08-13得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
