반응.구성 요소

이 페이지에는 React 구성 요소 클래스 정의에 대한 자세한 API 참조가 포함되어 있습니다. 상태 및 라이프 사이클뿐만 아니라 구성 요소 및 소품과 같은 근본적인 반응 개념에 익숙하다고 가정합니다. 그렇지 않다면 먼저 읽으십시오.

개요

React 를 사용하면 구성 요소를 클래스 또는 함수로 정의 할 수 있습니다. 클래스로 정의 된 구성 요소는 현재이 페이지에서 자세히 설명하는 더 많은 기능을 제공합니다. React 구성 요소 클래스를 정의하려면React.Component를 확장해야합니다.:

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}

유일한 방법을 정의해야 합니다에React.Componentrender(). 이 페이지에 설명 된 다른 모든 방법은 선택 사항입니다.

우리는 강력하게 자신의 기본 구성 요소 클래스를 만드는 것에 대해 권장합니다. React 구성 요소에서 코드 재사용은 주로 상속이 아닌 구성을 통해 이루어집니다.

참고:

React 는 ES6 클래스 구문을 사용하도록 강요하지 않습니다. 당신이 선호하는 경우,그것을 방지하기 위해 사용할 수 있습니다create-react-class모듈 또는 이와 유사한 사용자 지정한 추상화 대신 합니다. 자세한 내용은 ES6 없이 React 를 사용하여 살펴보십시오.

구성 요소의 수명 주기

각 구성 요소는 여러 가지”수명 주기 방법”재정의할 수 있는 코드를 실행하는 특별한 시간에 처리합니다. 이 수명주기 다이어그램을 치트 시트로 사용할 수 있습니다. 아래 목록에서 일반적으로 사용되는 수명주기 방법은 굵게 표시됩니다. 나머지는 비교적 드문 유스 케이스를 위해 존재합니다.

장착

이러한 방법이라고 다음과 같은 순서의 인스턴스가 구성 요소가 만들어지고 삽입 DOM:

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

참고:

이러한 방법으로 간주 레거시고 당신이 그들을 피해야에서 새로운드:

• UNSAFE_componentWillMount()

업데이트

업데이트에 의해 발생할 수 있습니다 변화의 소품이나 상태가 됩니다. 이러한 방법이라고는 다음 순서로 구성 요소가되고 다시 렌더링:

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

참고:

이러한 방법으로 간주 레거시고 당신이 그들을 피해야에서 새로운드:

• UNSAFE_componentWillUpdate()
• UNSAFE_componentWillReceiveProps()

마운트를 해제

이 메소드를 호출하면 구성 요소를 제거에서 DOM:

• componentWillUnmount()

오류 처리

이러한 방법이라고 할 때는 동안 오류가 발생하 렌더링에서 수명 주기 방법,또는에서 생성자의 어떤 아이 구성 요소입니다.

• static getDerivedStateFromError()
• componentDidCatch()

기타 Api

각 구성 요소 또한 제공합니다 몇 가지 다른 Api:

• setState()
• forceUpdate()

클래스 속성

• defaultProps
• displayName

인스턴스 속성

• props
• state

참조

일반적으로 사용되는 수명 주기 방법

방법들을 통해 이 섹션에서는 대부분을 커버합의 사용이 경우에 당신은 반응을 만드는 요소를 사용합니다. 시각적 참조를 위해이 수명주기 다이어그램을 확인하십시오.

render()

render()

render()방법은 필요한 유일한 방법은 클래스에서 구성 요소입니다.

라고 할 때 그것을 검토해야한this.propsthis.state와 반환 중 하나의 유형은 다음과 같다.

• 반응하는 요소입니다. 일반적으로 JSX 를 통해 생성됩니다. 예를 들어,<div /><MyComponent />은 반응하는 요소를 지시한 반응을 렌더링하 DOM 노드,또는 다른 사용자-정의된 구성품,각각합니다.
• 배열과 조각. 렌더링에서 여러 요소를 반환하도록하십시오. 자세한 내용은 조각에 대한 설명서를 참조하십시오.
• 포털. 자식을 다른 DOM 하위 트리로 렌더링하게하십시오. 자세한 내용은 포털의 설명서를 참조하십시오.
• 문자열과 숫자. 이들은 DOM 의 텍스트 노드로 렌더링됩니다.
• 부울 또는nullreturn test && <Child />test는 부울입니다.)

render()기능이 있어야 순수하고,의미는 그것을 수정하지 않는 구성 요소 상태를 반환합니다 같은 결과는 각번 호출하고 그와 직접 상호 작용하지 않습니다.

해야 하는 경우와 상호 작용하는 브라우저의 사업을에서componentDidMount()render()pure 를 유지하면 구성 요소를 더 쉽게 생각할 수 있습니다.

참고.

render()shouldComponentUpdate()false 를 반환합니다.

생성자를()

constructor(props)

지 않는 경우 초기화 상태와 당신은하지 않는 바인딩 방법을 필요가 없습을 생성자를 구현한 반응을 구성 요소입니다.

react 구성 요소의 생성자는 마운트되기 전에 호출됩니다. 을 구현할 때 생성자를 위한React.Componentsuper(props)this.props가 정의되지 않아 버그로 이어질 수 있습니다.

일반적으로 React 생성자에서

• 객체를this.state에 할당하여 로컬 상태를 초기화하는 두 가지 용도로만 사용됩니다.
• 이벤트 핸들러 메소드를 인스턴스에 바인딩합니다.

constructor()setState()this.state에서 직접 생성자:

constructor(props) { super(props); // Don't call this.setState() here! this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this);}

생성자 유일한 장소입니다 당신이해야 할당this.statethis.setState()componentDidMount()를 사용하십시오.

참고

소품을 상태로 복사하지 마십시오! 이것은 일반적인 실수:

constructor(props) { super(props); // Don't do this! this.state = { color: props.color };}

문제는 그것의 모두에 불필요(당신이 사용할 수 있는this.props.colorcolor소품에 반영되지 않습 상태).

의도적으로 소품 업데이트를 무시하려는 경우에만이 패턴을 사용하십시오. 는 경우,그것은 이름을 바꾸어 소품이라고 할initialColordefaultColorkey경우 필요합니다.

읽 우리의 블로그에 포스트를 피하는 파생 상태에 대해 배우고 무엇을 생각하는 경우에 필요하신 상태에 따라 달라집 props.

componentDidMount()

componentDidMount()

componentDidMount()호출 한 후 즉시 구성 요소를 탑재(에 삽입된 나무). DOM 노드가 필요한 초기화는 여기로 가야합니다. 원격 엔드 포인트에서 데이터를로드해야하는 경우 네트워크 요청을 인스턴스화하기에 좋은 장소입니다.이 방법은 모든 구독을 설정할 수있는 좋은 장소입니다. 그렇게하면componentWillUnmount()에서 구독을 취소하는 것을 잊지 마십시오.

setState()componentDidMount()render()constructor()에 초기 상태를 할당 할 수 있어야합니다. 그것을 할 수 있습니다,그러나,필요한 경우 조동 및 도구 설명이 필요할 때 측정 DOM 노드를 렌더링하기 전에 뭔가에 따라 달라지는 그것의 크기 또는 위치입니다.

은 첫째()

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate()호출한 후에 즉시 업데이트가 발생합니다. 이 메서드는 초기 렌더에 대해 호출되지 않습니다.구성 요소가 업데이트되었을 때 DOM 에서 작동 할 수있는 기회로 사용하십시오. 현재 소품을 이전 소품과 비교하는 한 네트워크 요청을 수행하기에 좋은 장소이기도합니다(예 소품이 변경되지 않은 경우 네트워크 요청이 필요하지 않을 수 있음).

componentDidUpdate(prevProps) { // Typical usage (don't forget to compare props): if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); }}

전화setState()componentDidUpdate()그러나 참고해야한다는 포장 상태에서 같은 위의 예에서,또는 당신이 원하는 무한 루프입니다. 또한 사용자가 볼 수는 없지만 구성 요소 성능에 영향을 줄 수있는 추가 재 렌더링이 발생합니다. 위에서 오는 소품에 어떤 상태를”미러링”하려고하는 경우 대신 직접 소품을 사용하는 것이 좋습니다. 소품을 상태로 복사하면 버그가 발생하는 이유에 대해 자세히 읽어보십시오.

경우에 당신의 구성 요소를 구현하는getSnapshotBeforeUpdate()componentDidUpdate(). 그렇지 않으면이 매개 변수가 정의되지 않습니다.

참고.

componentDidUpdate()shouldComponentUpdate()false 를 반환합니다.

null()

componentWillUnmount()

componentWillUnmount()componentDidMount().

구성 요소가 다시 렌더링되지 않으므로componentWillUnmount()setState()를 호출해서는 안됩니다. 구성 요소 인스턴스가 마운트 해제되면 다시 마운트되지 않습니다.

드물게 사용되는 수명주기 방법

이 섹션의 방법은 드문 사용 사례에 해당합니다. 그들은 편리 한 번에,하지만 당신의 구성 요소의 대부분은 아마 그들 중 하나를 필요로하지 않습니다. 맨 위에있는”덜 일반적인 수명주기 표시”확인란을 클릭하면이 수명주기 다이어그램에서 아래의 대부분의 방법을 볼 수 있습니다.

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState)

사용하는shouldComponentUpdate()하게 반응 알고 있는 경우에는 구성 요소의 출력에 의해 영향을 받지 않는 현재 상태 변경 또는 props. 기본 동작은 모든 상태 변경에 대해 다시 렌더링하는 것이며 대다수의 경우 기본 동작에 의존해야합니다.

shouldComponentUpdate()trueforceUpdate()가 사용될 때 호출되지 않습니다.

이 방법은 성능 최적화로만 존재합니다. 버그로 이어질 수 있으므로 렌더링을”방지”하기 위해 의존하지 마십시오. 을 고려하여 내장PureComponentshouldComponentUpdate()PureComponent는 소품과 상태의 얕은 비교를 수행하고 필요한 업데이트를 건너 뛸 가능성을 줄입니다.

경우에 당신은 당신이 쓰고 싶은 손으로 그것,당신은 비교될 수 있는this.propsnextPropsthis.statenextStatefalsefalse를 반환하면 상태가 변경 될 때 자식 구성 요소가 다시 렌더링되는 것을 방지하지 않습니다.

우리는 권장하지는 않 깊은 평등을 확인하거나 사용하는JSON.stringify()shouldComponentUpdate(). 그것은 매우 비효율적이며 성능에 해를 끼칠 것입니다.

현재하는 경우shouldComponentUpdate()falseUNSAFE_componentWillUpdate()render(),andcomponentDidUpdate()shouldComponentUpdate()false수 있습니다 여전히 그 결과에 다시 렌더링의 구성 요소입니다.

정적 getDerivedStateFromProps()

static getDerivedStateFromProps(props, state)

getDerivedStateFromPropsnull아무것도 업데이트하지 않아야합니다.

이 방법은 시간이 지남에 따라 상태가 소품의 변화에 의존하는 드문 사용 사례에 존재합니다. 예를 들어,그것은 쉽게 수행할 수 있습니다을 구현하기 위한<Transition>구성 요소 비교가 이전과는 다음에 아이들을 그들의 결정을 애니메이션입니다.

상태를 파생 시키면 자세한 코드가 생기고 구성 요소를 생각하기가 어려워집니다.더 간단한 대안에 대해 잘 알고 있는지 확인하십시오:

• 를 수행해야 하는 경우에는 부작용(예를 들어,데이터 가져오기 또는 애니메이션)응답에서 변경에서 소품,usecomponentDidUpdate라이프사이클 대신 합니다.
• 소품이 변경 될 때만 일부 데이터를 다시 계산하려면 메모 작성 도우미를 대신 사용하십시오.
• 하려는 경우”reset”어떤 상태 때 소 변경,고려 중 하나 만드는 요소에 완전히 통제하거나 완전히 조절되지 않는 함께key대신 합니다.

이 메서드는 구성 요소 인스턴스에 대한 액세스 권한이 없습니다. 고 싶은 경우에,당신은 다시 사용할 수 있는 코드 사이의getDerivedStateFromProps()UNSAFE_componentWillReceivePropssetState.

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate()호출하기 전에 오른쪽 가장 최근에 출력을 렌더링해 예 DOM. 잠재적으로 변경되기 전에 구성 요소가 DOM(예:스크롤 위치)에서 일부 정보를 캡처 할 수 있습니다. 이 라이프 사이클에 의해 반환 된 모든 값은componentDidUpdate()매개 변수로 전달됩니다.

이 사용되지 않은 경우 일반적이지만,그것은에서 발생할 수 있습니다 UIs 같은 채팅에는 스레드가 필요를 처리하는 스크롤에 위치한 특별한 방법입니다.

스냅샷 값(또는null)을 반환해야 합니다.

예를 들어,

class ScrollingList extends React.Component { constructor(props) { super(props); this.listRef = React.createRef(); } getSnapshotBeforeUpdate(prevProps, prevState) { // Are we adding new items to the list? // Capture the scroll position so we can adjust scroll later. if (prevProps.list.length < this.props.list.length) { const list = this.listRef.current; return list.scrollHeight - list.scrollTop; } return null; } componentDidUpdate(prevProps, prevState, snapshot) { // If we have a snapshot value, we've just added new items. // Adjust scroll so these new items don't push the old ones out of view. // (snapshot here is the value returned from getSnapshotBeforeUpdate) if (snapshot !== null) { const list = this.listRef.current; list.scrollTop = list.scrollHeight - snapshot; } } render() { return ( <div ref={this.listRef}>{/* ...contents... */}</div> ); }}

위의 예에서,그것을 읽는 것이 중요하scrollHeightgetSnapshotBeforeUpdaterender) 그리고”commit”단계는 라이프사이클(처럼getSnapshotBeforeUpdatecomponentDidUpdate).

오류 경계를

오류 경계가 반응하는 구성 요소를 잡는 자바 스크립트 오류를 어디서나 자신의 아이 구성 요소,트리 로그 사람들에 오류가 표시 대체 UI 를 대신 트리 구성요소는 충돌했습니다. 오류 경계는 렌더링 중,라이프 사이클 메소드 및 그 아래의 전체 트리의 생성자에서 오류를 포착합니다.

클래스 구성 요소가 오류의 경계하는 경우 그 정의(또는 모두)라이프 사이클의 방법을static getDerivedStateFromError()componentDidCatch(). 이러한 라이프 사이클에서 상태를 업데이트하면 아래 트리에서 처리되지 않은 JavaScript 오류를 캡처하고 대체 UI 를 표시 할 수 있습니다.

예기치 않은 예외로부터 복구하기 위해 오류 경계 만 사용하십시오.자세한 내용은 React16 의 오류 처리를 참조하십시오.

참고.

오류 경계선을 잡는 오류를 구성 요소는 아래에서 그들을 나무입니다. 오류 경계는 자체 내에서 오류를 잡을 수 없습니다.

정적 getDerivedStateFromError()

static getDerivedStateFromError(error)

이 라이프사이클 호출한 후에 오류가 발생하여 자손으로 구성 요소입니다.그것은 오류를 받는 발생했으로 매개 변수 값을 반환해야 합를 업데이트 상태입니다.

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; }}

참고.

getDerivedStateFromError()componentDidCatch()를 사용하십시오.

componentDidCatch()

componentDidCatch(error, info)

이 라이프사이클 호출한 후에 오류가 발생하여 자손으로 구성 요소입니다.를 받은 두 개의 매개변수:

1. error-한 오류는 발생합니다.
2. infocomponentStack키에 대한 정보를 포함하는 요소를 던져 오류가 있습니다.

componentDidCatch()라는 동안”commit”단계에서,그 부작용이 허용됩니다.그것은 사용해야 합 같은 것들에 대한 오류를 로깅:

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } componentDidCatch(error, info) { // Example "componentStack": // in ComponentThatThrows (created by App) // in ErrorBoundary (created by App) // in div (created by App) // in App logComponentStackToMyService(info.componentStack); } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; }}

생산 및 개발 빌의 반응하는 약간 다른 방법으로는componentDidCatch()핸들 오류가 있습니다.

에서 개발한 오류이블을windowwindow.onerrorwindow.addEventListener('error', callback)componentDidCatch().

에서 생산,대신,오류가 없어 거품을 의미하는 모든 조상의 오류 처리기만 받 오류를 명시되지 않은 잡은componentDidCatch().

참고.

이벤트에서의 오류를 렌더링할 수 있습니다 대체 UIcomponentDidCatch()setStatestatic getDerivedStateFromError()를 사용하십시오.

레거시 라이프 사이클 메소드

아래의 라이프 사이클 메소드는”레거시”로 표시됩니다. 그들은 여전히 작동하지만 새로운 코드에서는 사용하지 않는 것이 좋습니다. 에 대해 자세히 알아볼 수 있습니다 마이그레이션에서 유산이 수명 주기 방법 이 블로그 글을 참조하십시오.

UNSAFE_componentWillMount()

UNSAFE_componentWillMount()

참고.

이 수명 주기 이전 이름componentWillMountrename-unsafe-lifecyclescodemod 를 사용하십시오.

UNSAFE_componentWillMount()render()setState()constructor()componentDidMount()를 사용하십시오.이것은 서버 렌더링에서 호출되는 유일한 라이프 사이클 메소드입니다.

UNSAFE_componentWillReceiveProps()

UNSAFE_componentWillReceiveProps(nextProps)

참고.

이 수명 주기 이전 이름componentWillReceivePropsrename-unsafe-lifecyclescodemod 를 사용하십시오.

참고:

를 사용하여 이 수명 주기방법 종종 버그와의 불일치

• 를 수행해야 하는 경우에는 부작용(예를 들어,데이터 가져오기 또는 애니메이션)응답에서 변경에서 소품, 사용componentDidUpdate라이프사이클 대신 합니다.
• 사용한 경우에는componentWillReceiveProps를 위해 다시 컴퓨팅의 일부 데이터의 경우에만 소 변화,사용하는 메모이 제이션 도우미 대신 합니다.
• 사용한 경우에는componentWillReceiveProps재설정을 하기 위해 일부 국면 prop 변경,고려 중 하나 만드는 요소에 완전히 통제하거나 완전히 조절되지 않는 함께key대신 합니다.

다른 사용 사례의 경우 파생 상태에 대한이 블로그 게시물의 권장 사항을 따르십시오.

UNSAFE_componentWillReceiveProps()this.propsnextPropsthis.setState()에서 이 방법입니다.부모 구성 요소로 인해 구성 요소가 다시 렌더링되는 경우 소품이 변경되지 않은 경우에도이 메서드가 호출됩니다. 변경 사항 만 처리하려는 경우 현재 값과 다음 값을 비교해야합니다.

React 는 마운팅 중에 초기 소품으로UNSAFE_componentWillReceiveProps()를 호출하지 않습니다. 구성 요소의 소품 중 일부가 업데이트 될 수있는 경우에만이 메서드를 호출합니다. 일반적으로this.setState()를 호출하면UNSAFE_componentWillReceiveProps()가 트리거되지 않습니다.

UNSAFE_componentWillUpdate()

UNSAFE_componentWillUpdate(nextProps, nextState)

참고.

이 수명 주기 이전 이름componentWillUpdaterename-unsafe-lifecyclescodemod 를 사용하십시오.

UNSAFE_componentWillUpdate()호출하기 전에 렌더링할 때 새로운 소품이나 상태가 수신되고 있습니다. 업데이트가 발생하기 전에 준비를 수행 할 수있는 기회로 사용하십시오. 이 메서드는 초기 렌더에 대해 호출되지 않습니다.

참고할 수 없는 전화this.setState()UNSAFE_componentWillUpdate()반환합니다.

일반적으로이 방법은componentDidUpdate()로 대체 할 수 있습니다. 이 메소드에서 DOM 에서 읽은 경우(예:스크롤 위치 저장)해당 논리를getSnapshotBeforeUpdate()로 이동할 수 있습니다.

참고.

UNSAFE_componentWillUpdate()shouldComponentUpdate()false 를 반환합니다.

기타 Api

과는 달리 수명주기법을 위(는 반응에 대한 호출은 당신),아래 방법들을 통해 있는 방법들을 통해 호출할 수 있습에서 당신의 요소를 사용합니다.

그 중 두 가지가 있습니다.setState()forceUpdate().

setState()

setState(updater, )

setState()enqueues 변경 구성 요소 상태를 알려줍 반응이 구성 요소와 그들이 다시 렌더링이 업데이트 상태입니다. 이는 이벤트 핸들러 및 서버 응답에 대한 응답으로 사용자 인터페이스를 업데이트하는 데 사용하는 기본 방법입니다.

setState()를 구성 요소를 업데이트하기위한 즉각적인 명령이 아닌 요청으로 생각하십시오. 더 나은 인식 성능을 위해 React 는이를 지연시킨 다음 단일 패스에서 여러 구성 요소를 업데이트 할 수 있습니다. React 는 상태 변경이 즉시 적용된다는 것을 보장하지 않습니다.

setState()setState()this.statecomponentDidUpdatesetStatesetState(updater, callback)updater인수에 대해 읽어보십시오.

setState()shouldComponentUpdate()falseshouldComponentUpdate()setState()경우에만 새로운 상태에 이전과 다른 국가는 불필요한 재 렌더링합니다.

첫 번째 인수는 서명이있는updater함수입니다:

(state, props) => stateChange

statestatepropsprops.step에 의해 상태의 값을 증가시키고 싶다고 가정 해보십시오.:

this.setState((state, props) => { return {counter: state.counter + props.step};});

모두stateprops을 받았으로 업데이트 기능이 보장됩니다 up-to-date. 업데이트 프로그램의 출력은state와 얕게 병합됩니다.

두 번째 매개 변수를setState()setStatecomponentDidUpdate()를 사용하는 것이 좋습니다.

할 수 있는 선택적으로 통과하는 개체는 첫 번째 인수로setState()대신 기능:

setState(stateChange)

이행 얕은 병합의stateChange새로운 상태,예를 들어,조정 쇼핑 카트 항목량:

this.setState({quantity: 2})

이 양식의setState()도 비동기,그리고 여러 번 호출하는 동안 동일한 주기를 일괄 처리할 수 있다. 예를 들어 같은 주기에서 항목 수량을 두 번 이상 증가시키려고 하면 다음과 같은 결과가 발생합니다:

Object.assign( previousState, {quantity: state.quantity + 1}, {quantity: state.quantity + 1}, ...)

후속 호출은 무시됩니다 값에서 이전의 통화에서 같은 사이클,그래서 양만이 증가되어야 한다. 는 경우 다음 상태로 현재 상태에 따라,우리가 사용하는 것이 좋습 업데이트 프로그램 기능식 대신

this.setState((state) => { return {quantity: state.quantity + 1};});

더 자세한 사항 참조하십시오:

• 국가 및 라이프 사이클 가이드
• 에서 깊이:을 때와 왜setState()통화 일괄?
• 깊이:왜this.state가 즉시 업데이트되지 않습니까?

forceUpdate()

component.forceUpdate(callback)

기본적으로 할 때,당신의 구성 요소의 상태 또는 소품 변경,구성 요소를 다시 렌더링합니다. 는 경우에 당신의render()forceUpdate().

전화forceUpdate()render()shouldComponentUpdate()shouldComponentUpdate()메서드를 포함하여 자식 구성 요소에 대한 일반 수명주기 메서드가 트리거됩니다. React 는 여전히 마크 업이 변경되는 경우에만 DOM 을 업데이트합니다.

정상적으로하지 않도록 해야 합니다 모든 사용의forceUpdate()this.propsthis.staterender().

클래스 속성

defaultProps

defaultProps으로 정의할 수 있습 속에서 구성 요소 등 자체 기본값을 설정하려면 소품에 대해 클래스입니다. This is used for undefined props, but not for null props. For example:

class CustomButton extends React.Component { // ...}CustomButton.defaultProps = { color: 'blue'};

If props.color is not provided, it will be set by default to 'blue':

 render() { return <CustomButton /> ; // props.color will be set to blue }

If props.color is set to null, it will remain null:

 render() { return <CustomButton color={null} /> ; // props.color will remain null }

displayName

The displayName string is used in debugging messages. 일반적으로 구성 요소를 정의하는 함수 또는 클래스의 이름에서 유추되므로 명시 적으로 설정할 필요가 없습니다. 설정할 수 있습니다 그것은 명시적으로 표시하려면 다른 이름을 디버깅을 위해 나를 만들 때 높은 순서 구성 요소를 참조하십시오 포장 디스플레이의 이름을 쉽게 디버깅을 위한 상세정보.

인스턴스 속성

props

this.props포함되 소품들에 의해 정의된 발신자의 구성 요소입니다. 소품에 대한 소개는 구성 요소 및 소품을 참조하십시오.

에서,특히this.props.children특별한 소품,일반적으로 정의하여 아이에서 태그 JSX 표현이 아닌 태그에 자체입니다.

상태

태 데이터를 포함한 특정이 구성 요소는 시간에 따라 변경될 수 있습니다. 상태는 사용자 정의이며 일반 자바 스크립트 객체 여야합니다.

렌더링 또는 데이터 흐름(예:타이머 ID)에 일부 값이 사용되지 않으면 상태에 넣을 필요가 없습니다. 이러한 값은 구성 요소 인스턴스의 필드로 정의할 수 있습니다.상태에 대한 자세한 내용은 상태 및 수명주기를 참조하십시오.

this.statesetState()this.state를 취급합니다.