반응 성분과 반응 요소의 차이
반응 구성 요소와 반응 요소의 차이점은 무엇입니까?이 문서에서는 두 가지 모두에 대해 언급하고 있지만 자세한 내용은 설명하지 않습니다.일부 방법에는 컴포넌트와 다른 요소가 필요합니다.
여기에는 다음과 같은 세 가지 관련 정보가 포함되어 있으며, 그 이름은 다음과 같습니다.
- 구성 요소들
- 컴포넌트 인스턴스
- 요소들
다른 UI 프레임워크에 익숙하다면 두 가지 종류만 있을 것으로 예상할 수 있기 때문에 약간 놀랍습니다(예: 클래스(예:Widget: " " " ).new Widget()React에서는 그렇지 않습니다.컴포넌트 인스턴스는 요소와 동일하지 않으며 이들 사이에 일대일 관계도 없습니다.이를 설명하기 위해 다음 코드를 고려합니다.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class MyComponent extends React.Component {
constructor(props) {
super(props);
console.log('This is a component instance:', this);
}
render() {
const another_element = <div>Hello, World!</div>;
console.log('This is also an element:', another_element);
return another_element;
}
}
console.log('This is a component:', MyComponent)
const element = <MyComponent/>;
console.log('This is an element:', element);
ReactDOM.render(
element,
document.getElementById('root')
);
위의 코드:
MyComponent(클래스 자체)는 컴포넌트입니다.element는 요소입니다.의 예가 아니다MyComponent작성되는 컴포넌트인스턴스에 대한 설명일 뿐입니다.이 있는 물건이다.key,props,ref★★★★★★★★★★★★★★★★★」type,, 여기 서,,,,,,,key★★★★★★★★★★★★★★★★★」refnull,props또한빈객체입니다.typeMyComponent.- 의 예
MyComponent(위의 예에서는 생성자에서 로그가 됩니다)는, 다음의 경우에 작성됩니다(및, 그 생성자로부터 로그가 기록됩니다.element렌더링 됩니다. another_element이며, '소재'가 있습니다.key,ref,props★★★★★★★★★★★★★★★★★」type★★★★★★★★★★★★★★★★와 같은 속성element이번에는 - 의 입니다.type입니다."div".
React가 이러한 세 가지 개념을 갖는 설계 이유에 대해서는 React 팀의 블로그 게시물인 React Components, Elements, Instance에서 자세히 알아보도록 권장합니다.
마지막으로 공식 문서에서는 함수 또는 클래스를 나타낼 때 "component"라는 용어를 사용하고 인스턴스를 나타낼 때 "component instance"라는 용어를 사용하는 것은 엄격하지만 다른 소스에서는 반드시 이 용어를 준수하지는 않습니다.스택을 읽을 때 "component"가 "component instance"라는 의미로 사용되고 있는 (잘못된) 것으로 간주됩니다.GitHub에 대한 답변이나 토론이 넘쳐난다.
이에 대한 자세한 설명을 드리자면, 반응 요소에는 시제품에 메서드도 없고 아무것도 없습니다.이것은 또한 그들을 빠르게 만든다.
"ReactElement는 가볍고 상태 비저장적이며 불변의 DOM 요소를 가상으로 표현한 것입니다." - 리액트 용어집
성분 δ δ δ δ δrender()함수는 배경 뒤에 있는 반응 요소의 DOM 트리를 반환합니다(이것은 가상 DOM btw).복잡한 매핑과 다른 로직이 관련되어 있지만 기본적으로 이러한 React 요소는 DOM 요소에 매핑됩니다.
를 직접 도 있습니다.React.createElement(arg)arg html 리액트 컴포넌트.
리액트 요소
는 단순한 입니다.Object자기 방식 없이.네 번째
type,a ,aStringHTML 리액트 리액트key,a ,aStringrefInstance 중 하나에props(Properties)Object)
반응 요소는 반응 구성 요소의 인스턴스가 아닙니다.은 리액트 인스턴스( 리액트 컴포넌트 인스턴스(또는 리액트 컴포넌트 인스턴스(Resact Component Instance)에 다름)가 리액트 컴포넌트인스턴스(Respect Component Instance)에 대해설명한 입니다.typeHTML 을 사용합니다.
리액트 컴포넌트를 설명하는 리액트 요소는 최종적으로 렌더링되는 DOM 노드를 알 수 없습니다.이 연결은 추상화되어 렌더링 중에 해결됩니다.
반응 요소는 하위 요소를 포함할 수 있으므로 가상 DOM 트리를 나타내는 요소 트리를 형성할 수 있습니다.
React 컴포넌트 및 React 컴포넌트 인스턴스
리액트컴포넌트는, 「」는, 「Custom React Component」의 됩니다.React.createClass '연장'을 React.Component(ES2015).되면 리액트 에는 「」가 필요합니다.props ObjectReact 컴포넌트 인스턴스라고 하는 인스턴스를 반환합니다.
리액트 라이프 사이클 리액트. 어음음음 음 it it it음음 at at at it it가 있어야 합니다.rendermethod : 리액트 엘리먼트(-)를 선택합니다.리액트 컴포넌트 인스턴스를 직접 작성하는 것이 아니라 리액트 컴포넌트 인스턴스를 직접 작성하는 것이 아닙니다.
반응 요소 대 반응 구성 요소
리액트 요소
- 리액트 요소는 컴포넌트에서 반환되는 요소입니다.컴포넌트가 나타내는 가상 DOM 노드를 설명하는 객체입니다.
- 함수 컴포넌트의 경우 이 요소는 함수가 반환하는 객체입니다.
- 클래스 구성 요소의 경우 요소는 구성 요소의 렌더 함수가 반환하는 개체입니다.r
- 리액트 요소는 브라우저에 표시되지 않습니다.그것들은 단지 기억 속의 물건일 뿐이고 우리는 그것에 대해 아무것도 바꿀 수 없다.
- 에는 다른 반응 가 있을 수 .
typeHTML 입니다.
- 반응 요소는 화면에서 보고 싶은 것을 나타냅니다.
- React 요소는 DOM 노드의 객체 표현입니다.
여기서 이 구별을 하는 것이 중요합니다.왜냐하면 이 요소는 실제 화면에서 볼 수 있는 것이 아니라 오브젝트 표현이 렌더링되는 것이기 때문입니다.
리액션은 다음과 같은 점에서 효과적입니다.
- 리액션은 오버헤드 없이 이러한 요소를 생성 및 파괴할 수 있습니다.JS 오브젝트는 경량이며 저비용입니다.
- React는 무엇이 변경되었는지 확인하기 위해 이전 개체 표현으로 개체를 구분할 수 있습니다.
- React는 검출된 변경이 발생한 실제 DOM을 갱신할 수 있습니다.이것은 성능의 차이가 있습니다.
createElement method.
const element = React.createElement(
'div',
{id: 'login-btn'},
'Login'
)
createElement takes in three arguments
- 태그 이름(div, span 등)
- 요소에서 원하는 속성
- '자녀'라고 하는 )
Login)
createElement invocation returns an object
{
type: 'div',
props: {
children: 'Login',
id: 'login-btn'
}
}
ReactDOM.render), we'll have a new DOM node that looks like this:
<div id='login-btn'>Login</div>
후자!
일반적으로 React는 구성 요소 우선 접근 방식을 통해 학습되지만, 요소를 먼저 이해하면 구성 요소로의 원활한 전환이 이루어집니다.
리액트 컴포넌트
컴포넌트는 선택적으로 입력을 받아들여 React 요소를 반환하는 함수 또는 클래스입니다.
리액트 컴포넌트는 템플릿입니다.청사진.글로벌 정의이것은 함수 또는 클래스(렌더 함수 포함)일 수 있습니다.
를 첫 인수로 , 가 렌더링되는지 하고 더 이상 반응이 까지 이 합니다.
createElement클래스 또는 함수를 첫 번째 인수로 하는 호출.React는 함수 또는 클래스 유형을 가진 요소를 발견하면 해당 구성요소와 상의하여 대응하는 소품에서 반환해야 하는 요소를 파악합니다.
이 프로세스가 끝나면 React는 DOM 트리의 완전한 오브젝트를 나타냅니다., .
setState★★★★★★★★★★★★★★★★★」ReactDOM.render출됩니니다다
클래스 구문은 React 구성 요소를 정의하는 가장 일반적인 방법 중 하나입니다.기능 구문보다 상세하지만 라이프 사이클 훅 형태로 더 많은 제어 기능을 제공합니다.
- 동일한 컴포넌트의 많은 인스턴스를 렌더링할 수 있습니다.
- 인스턴스는 클래스 기반 컴포넌트 내에서 사용되는 "this" 키워드입니다.
- 수동으로 생성되지 않고 React 메모리 내부에 있습니다.
클래스 컴포넌트를 만듭니다.
// MyComponent.js
import React, { Component } from 'react';
class MyComponent extends Component {
render() {
return (
<div>This is my component.</div>
);
}
}
export default MyComponent;
다른 컴포넌트에 사용
// MyOtherComponent.js
import React, { Component } from 'react';
import MyComponent from './MyComponent';
class MyOtherComponent extends Component {
render() {
return (
<div>
<div>This is my other component.</div>
<MyComponent />
</div>
);
}
}
export default MyOtherComponent;
소품 사용
<MyComponent myProp="This is passed as a prop." />
에는 ★★★★★★★★★★★로 액세스 할 수 있습니다.this.props
class MyComponent extends Component {
render() {
const {myProp} = this.props;
return (
<div>{myProp}</div>
);
}
}
상태 사용 중
class MyComponent extends Component {
render() {
const {myState} = this.state || {};
const message = `The current state is ${myState}.`;
return (
<div>{message}</div>
);
}
}
라이프 사이클 훅 사용
class MyComponent extends Component {
// Executes after the component is rendered for the first time
componentDidMount() {
this.setState({myState: 'Florida'});
}
render() {
const {myState} = this.state || {};
const message = `The current state is ${myState}.`;
return (
<div>{message}</div>
);
}
}
- 인스턴스가 없습니다.
- 여러 번 렌더링할 수 있지만 React는 로컬 인스턴스를 각 렌더링과 연결하지 않습니다.
- React는 함수의 호출을 사용하여 함수에 대해 렌더링할 DOM 요소를 결정합니다.
★★★★★★★★★★★★★★★★ createElement
function Button ({ addFriend }) {
return React.createElement(
"button",
{ onClick: addFriend },
"Add Friend"
)
}
function User({ name, addFriend }) {
return React.createElement(
"div",
null,
React.createElement(
"p",
null,
name
),
React.createElement(Button, { addFriend })
)
}
으로?createElement
function Button ({ addFriend }) {
return {
type: 'button',
props: {
onClick: addFriend,
children: 'Add Friend'
}
}
}
function User ({ name, addFriend }) {
return {
type: 'div',
props: {
children: [
{
type: 'p',
props: {
children: name
}
},
{
type: Button,
props: {
addFriend
}
}
]
}
}
}
, 여기 ㅇㅇㅇㄹㄹㄹㄹㄹㄹㄹㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴButton「」를 .onLogin반응하다
ButtononLogin.- 「DOM」의 , 「CreateElement」의 createElement를 합니다.Create Element는 Create Element입니다.
id여하하다
React Element 및그 DOM은 노드나 속성을 나타냅니다.이는 불변의 설명 개체이므로 메서드를 적용할 수 없습니다.
예 -
<button class="blue"></button>
React Component- - 리액트합니다.DOM 노드 및 하위 구성 요소의 인스턴스에 대한 참조를 유지해야 합니다.
const SignIn = () => (
<div>
<p>Sign In</p>
<button>Continue</button>
<button color='blue'>Cancel</button>
</div>
);
구성 요소는 요소를 만드는 공장입니다.
요소는 DOM 노드 또는 기타 컴포넌트의 관점에서 화면에 표시할 내용을 설명하는 일반 객체입니다.요소는 소품에 다른 요소를 포함할 수 있습니다.React 요소를 만드는 것은 비용이 적게 듭니다.일단 요소가 생성되면 변환되지 않습니다.React 요소의 객체 표현은 다음과 같습니다.
const element = React.createElement(
'div',
{id: 'login-btn'},
'Login'
)
위의 createElement는 다음과 같은 오브젝트를 반환합니다.
{
type: 'div',
props: {
children: 'Login',
id: 'login-btn'
}
}
마지막으로 다음과 같이 ReactDOM.render를 사용하여 DOM에 렌더링합니다.
<div id='login-btn'>Login</div>
단, 컴포넌트는 몇 가지 다른 방법으로 선언할 수 있습니다.render() 메서드를 가진 클래스일 수 있습니다.또는 단순한 경우에는 함수로 정의할 수 있습니다.어느 경우든 소품을 입력으로 사용하고 요소 트리를 출력으로 반환합니다.마지막에 JSX가 createElement로 변환되었습니다.
function Button ({ onLogin }) {
return React.createElement(
'div',
{id: 'login-btn', onClick: onLogin},
'Login'
)
}
제 의견은 다음과 같습니다.
ElementVDOM v v v 、 VDOM v v 。으로는 'Component Instance.
이 괜찮다면functional component 더 반응할 이다.Element . 。functional componentVDOM을 사용합니다.
반응 ★★★Component Instance예:tree는 「으로, 그 리액트에 있습니다.Component Instance그리고 모든 주(州)가 미국 어디에서나Component Instance
리액션은Element 트리입니다.
리액트 'VDOM'을 요?Component Instances이게 진짜 질문입니다.
언뜻 보면 그렇게 할 수 없는 이유를 모르겠다.따라서 대부분의 답은 성능 문제일 수 있습니다.
★★★Element과 VDOM VDOM 사이의 입니다.Component Instance이 추상화가 필요한 이유는 명확하지 않습니다.최적화를 가능하게 할 가능성이 높습니다.를 들면, 「 」입니다.Element 않는 는, 「」의 메서드가 있습니다.Component Instance서브트리를 렌더링할 필요가 없다고 합니다.
이 경우, 이 최적화를 처리하는 로직에서는, 이 여분의 간접 레이어가 「필요」합니다.VDOM 의 일부를 새로운 VDOM 와 비교해서는 안 되는 장소에 보존할 필요가 있기 때문입니다.또, 새로운 VDOM 는 전혀 계산되지 않을 수도 있습니다.따라서 간접 레이어를 추가로 사용하면 렌더링 로직이 심플해지고 보다 깔끔하고 유지보수가 용이한 구현이 가능해집니다.
Haskell에서 이 개념은 "리프팅"이라고 불립니다.
예를 들어 해스켈의 모나드는 그러한 리프팅의 완벽한 예이다.
의 일종으로, 값으로서 할 수 있는 으로, 예를 들면 「모나드」라고 하는 입니다.42반응합니다Elements 「의 입니다.계산하고 싶은 사람이 있다면.
여기에서는, 다음의 간단한 예와 함께, 이러한 「추가」인다이렉션의 개념에 대해 설명합니다.
즉, 섣부른 최적화가 모든 악의 근원이라고 할 수 있습니다.
또는 : 소프트웨어 엔지니어링의 기본 정리
소프트웨어 엔지니어링의 기본 정리(FTSE)는 Andrew Koenig가 고(故) David J.에 기인한 Butler Lampson1의 발언을 설명하기 위해 만든 용어입니다.휠러: 2
우리는 추가 수준의 간접적인 방법을 도입함으로써 어떤 문제도 해결할 수 있습니다.
제가 로는 리액션이라고 합니다.Elements는, 복잡성에 적절히 대처해, 어느 정도의 최적화(퍼포먼스)를 가능하게 하는 실장 상세입니다.나는 왜 이 여분의 간접적인 방법을 없앨 수 없었는지 모르겠다 - 원칙적으로 - 리액션은 여전히 "그냥" 작동할 것이다 - 하지만 리액션 "엔진"을 구현하고 유지하는 것 자체가 아마도 악몽일 것이다.
여기서 뭔가 부족한 점이 있으면 정정해 주세요.
사용자 6445533의 답변 중 중요한 부분을 인용합니다.
typeHTML 리액트
이것이 핵심 ^^^^입니다.
요소가 VDOM이 아닙니다.
몇 가지 예를 들어 이 질문을 간단히 할 수 있습니다.
정의 상자:
function Box() {
return (
// few code
)
}
console.log(Box)콘솔에 React 컴포넌트를 로깅하고 있습니다.
이렇게 console.log(<Box />)콘솔에 React Element를 로깅하고 있으며 다음 코드에서도 동일한 것을 로깅하고 있습니다.console.log(<Box>...<Box />).
요약:.
Box: 리액트 컴포넌트.<Box />★★★★★★★★★★★★★★★★★」<Box>...</Box>: 리액트 요소.
A React Elementhtml(돔)을 사용하다이는 논란의 여지가 많은 jsx 형식을 사용하지 않고 요소를 작성하는 방법일 뿐입니다.
A React Component오브젝트로 간주할 수 있는 것입니다., 그을 지원합니다.React lifecycles일반적으로는 재사용할 수 없습니다(적어도 아직 재사용을 발견하지 못했습니다. 을 참조)반드시 렌더링 기능이 있어야 합니다.
A React Class이른바 클래스입니다. 향상React Class ★★★★★★★★★★★★★★★★★」React Component은 만이 진짜 입니다. 예를 들어 구문만이 진짜 변화입니다.React Component으로 하고 있습니다.ES6 syntax또 다른 주요 변경사항은 화살표 함수를 사용하지 않는 한 이 함수의 기본 바인딩이 지원되지 않는다는 것입니다. Mixins 님은 현재 지원되지 않습니다.ES6.
리액트 컴포넌트는 변동 가능하지만 요소는 변동 불가
요소는 컹크입니다.
React를 사용하면 UI를 애플리케이션 상태에 정의된 순수한 기능으로 정의할 수 있습니다.상태를 변경할 때마다 전체 UI를 계산하여 구현할 수 있지만 비용이 많이 듭니다.이고 쿵(쿵)을 합니다.PureComponent 반응하다
언급URL : https://stackoverflow.com/questions/30971395/difference-between-react-component-and-react-element
'IT' 카테고리의 다른 글
| 재스트 반응 테스트:지연 후 상태 확인 (0) | 2023.03.04 |
|---|---|
| React-Native에서 Navigator 구성 요소를 사용한 사용자 정의 탐색 (0) | 2023.03.04 |
| use Selector의 파괴와 여러 콜의 파괴 (0) | 2023.03.04 |
| Java에서 JSONObject를 사용하여 다음 구조에 대해 중첩된 JSON 개체를 생성하시겠습니까? (0) | 2023.02.27 |
| Angular 속도를 높이는 방법JS 어플리케이션? (0) | 2023.02.27 |