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

이번 글은 주로 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('react');const ReactDOM = require('react-dom');
  
  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('react');const ReactDOM = require('react-dom');

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

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

구체적인 그림은 다음과 같습니다:

6. 요약

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

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

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

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