React의 기본 구성요소를 어떻게 사용하나요? React의 기본 구성요소 및 라이프사이클 소개

寻∝梦
풀어 주다: 2018-09-11 13:52:58
원래의
1155명이 탐색했습니다.

이번 글은 주로 react에서 컴포넌트의 기초와 생명주기에 대한 자세한 설명을 소개합니다. 이제 이 글을 함께 읽어보겠습니다.

이 글은 주로 컴포넌트의 사용에 대해 설명합니다. React, React 고유의 JSX 구문과 React 라이프 사이클의 사용에 대한 자세한 내용은 다음과 같습니다. 🎜#

React 구성 요소
  • React 다중 구성 요소 중첩
  • React 구문—JSX# 🎜🎜 ## ## ####반응의 수명주기### ## ###1#1. #
  • innerHTML: html 문자열 렌더링 + 모든 DOM 요소 다시 만들기
  • Virtual DOM: 가상 DOM 렌더링 + 차이점 + 필수 DOM 업데이트
  • 자세한 소개는 React 가상 DOM 상세 설명

  • 2을 참조하세요. 1. 구성요소 생성:

1) 함수 정의 없음
  • #🎜🎜 #

    2) ES5 기본 방식: React.createClass, (이것은 자동으로 바인딩됩니다)

  • 3) ES6 형식: 확장 React.Component, (이 소스는 super()에 있음)# 🎜🎜#

2. 컴포넌트: React의 기능

  • 3. 중요성 모듈식 개발에 대한 구성요소

    4. 구성요소의 반환 함수에는 HTML 노드가 하나만 반환됩니다
    • # 🎜🎜##🎜 🎜#5. 외부에서 사용할 수 있는 구성 요소 정의: 기본 클래스 헤더 내보내기 React.Component
    • 6. 구성 요소 가져오기: "XXX 파일"에서 헤더 가져오기 ;
    • 7. 웹 페이지 항목: ReactDOM.render(comComponent, document.getElementById("xxx"));
    • #🎜🎜 ##🎜🎜 #

      상세 코드는 다음과 같습니다.

      const React = require('react');const ReactDOM = require('react-dom');
      import ComponentHeader from "./component/header.js";
      import ComponentFooter from "./component/footer.js";
      import BodyIndex from "./component/bodyIndex.js";class Index extends React.Component {
          render() {        return (
                  <p>
                      <ComponentHeader />
                      <BodyIndex />
                      <ComponentFooter />
                  </p> 
              )
          }
      }
      ReactDOM.render(
          <Index />,
          document.getElementById("wrap")
      )
      로그인 후 복사
    • 3. React 다중 컴포넌트 중첩
  • 컴포넌트는 매개변수를 통해 전달될 수 있습니다.
  • 반환은 하나의 태그 컨테이너만 허용되지만 태그 컨테이너에는 수많은 태그가 저장될 수 있습니다
  • #🎜🎜 #참고 프로젝트 이름 및 파일 구조

  • 코드는 다음과 같습니다.

    const React = require(&#39;react&#39;);const ReactDOM = require(&#39;react-dom&#39;);
    
    export default class ComponentHeader extends React.Component {
        render() {        return (
                <header>
                    <h1>页面的头部</h1>
                </header>
            )
        }
    }
    로그인 후 복사
  • 4. 내장 표현식
  • 구문: {userName == “” ?
  • }

댓글 쓰기: {/#🎜 🎜#Button

/}

    HTML은 유니코드 트랜스코딩을 보여줍니다
  • #🎜 🎜#HTML은 특수 문자를 표시합니다. :dangerouslySetInnerHTML ={{__html : html}}—이 메서드에는 XSS 공격이 있습니다.
  • JSX가 배열을 읽을 때 모든 멤버 변수에 액세스할 수 있습니다. 배열 이름으로 직접
  • JSX가 객체를 읽을 때 여전히 object.properties의 작업을 따릅니다.

# 🎜🎜#JSX의 구문은 컴파일됩니다. 규칙을 따르세요:

  • HTML 태그가 나타나면 HTML 규칙을 사용하여 구문 분석합니다(<로 시작). ;); 用户还没有登录 : 用户名:${userName}#🎜 🎜#

  • JavaScript 규칙을 사용하여 코드 블록을 구문 분석합니다({로 시작).
  • 코드 세부정보:
  • const React = require(&#39;react&#39;);const ReactDOM = require(&#39;react-dom&#39;);
    
    export default class BodyIndex extends React.Component {
        render() {        var userName = "CSS3";        var bool = true;        var html = "HTML5 CSS3";        // JSX可以使用JS变量的,但是如果是一个数组,会访问到其内部的所有数组成员
            var arr = [
                <h2>HTML</h2>,
                <h3>HTML</h3>
            ];        // 解构赋值
            var obj = {
                userName,
                bool,
                html
            }    // JSX的语法在编译上遵循规则:
            // 遇到HTML标签(以<开头)就用HTML规则解析
            // 遇到代码块(以{开头)就用JavaScript规则解析
            return (
                <p>
                    <p>{obj.userName}</p>
                    <p>{arr}</p>
                    <h1>页面的主体</h1>
                    <p>{userName == "" ? `用户还没有登录` : `用户名:${userName}`}</p>
                    {/*按钮*/}
                    <p><input type="button" value={userName} disabled={bool} /></p>
                    <p>{html}</p>
                    <p dangerouslySetInnerHTML ={{__html : html}}></p>
                </p>
            )
        }
    }
    로그인 후 복사
  • 5, React 라이프사이클

    라이프사이클 전체 제공 10가지 API(인스턴스화 5개, 로드 4개, 소멸 1개)
  • 1.getDefaultProps

    구성 요소 클래스에 대해 작동하며 한 번만 호출됩니다. 반환된 개체는 기본 소품을 설정하는 데 사용됩니다. 인스턴스 간에 공유됩니다. .
  • 2.getInitialState

    인스턴스가 생성될 때 한 번씩 호출되어 각 인스턴스의 상태를 초기화할 수 있습니다. this.props에 액세스하세요.
  • 3.comComponentWillMount

    첫 번째 렌더링을 완료하기 전에 호출되며, 이때에도 구성 요소의 상태를 수정할 수 있습니다. (자세한 내용을 보고 싶으시면 PHP 중국어 홈페이지
  • React Reference Manual
  • 열에서 학습하세요)


    4.render

  • 필수 방법 가상 DOM을 생성하기 위해 이 메소드에는 특별한 규칙이 있습니다:
    • 5.comComponentDidMount

      실제 DOM이 렌더링된 후에 호출되며 this.getDOMNode()를 통해 액세스할 수 있습니다. 이 방법에서는 실제 DOM 요소에 적용됩니다. 이때 이 DOM을 운영하기 위해 다른 클래스 라이브러리를 사용할 수 있습니다.
    • 서버측에서는 이 메소드가 호출되지 않습니다.
    • 6.comComponentWillReceiveProps

    • 컴포넌트가 새로운 props를 받아 nextProps 파라미터로 사용할 때 호출됩니다. 이때 컴포넌트 props와 state가 변경될 수 있습니다.
7.shouldComponentUpdate

컴포넌트가 새 prop을 렌더링해야 하는지 아니면 상태를 렌더링해야 하는지에 따라 false를 반환하면 후속 라이프 사이클 메서드를 건너뛰는 것을 의미하며 일반적으로 버그를 방지하는 데 필요하지 않습니다. 애플리케이션 병목 현상이 발생하는 경우 이 방법을 통해 적절한 최적화를 수행할 수 있습니다.

이 메서드는 첫 번째 렌더링 중이나 forceUpdate 메서드가 호출된 후에는 호출되지 않습니다.

8.comComponentWillUpdate

새 prop 또는 상태를 받은 후 진행 이전에 호출됨 렌더링, 소품 또는 상태는 현재 업데이트가 허용되지 않습니다.

9.comComponentDidUpdate

새 prop이나 상태를 렌더링한 후 호출되며 이때 새 DOM 요소에 액세스할 수 있습니다.

10.comComponentWillUnmount

은 구성 요소가 제거되기 전에 호출되며 일부 정리 작업을 수행하는 데 사용할 수 있습니다. , 생성된 타이머 또는 추가된 이벤트 리스너 등입니다.

구체적인 그림은 다음과 같습니다:
React의 기본 구성요소를 어떻게 사용하나요? React의 기본 구성요소 및 라이프사이클 소개

6. 요약

이 기사는 주로 React 구성 요소의 작성 및 사용에 대한 간략한 소개를 제공합니다. 특정 코드는 다운로드할 수 있습니다. 링크: https://pan.baidu. com/s/1qZATfYG 비밀번호: 7kkj

다운로드 후, 명령 패널을 통해 현재 폴더로 이동한 후 npm install을 실행하여 모든 환경을 설치합니다. 설치가 완료된 후 webpack –watch를 실행하면 프로젝트가 준비됩니다. 달리다.

이 기사는 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트React 사용자 매뉴얼 칼럼을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

위 내용은 React의 기본 구성요소를 어떻게 사용하나요? React의 기본 구성요소 및 라이프사이클 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿