React의 기본 구성요소를 어떻게 사용하나요? React의 기본 구성요소 및 라이프사이클 소개-JS 튜토리얼-php.cn

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

寻∝梦

풀어 주다： 2018-09-11 13:52:58

원래의

1140명이 탐색했습니다.

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

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

React 구성 요소

React 다중 구성 요소 중첩
React 구문—JSX# 🎜🎜 ## ## ####반응의 수명주기### ## ###1#1. #
자세한 소개는 React 가상 DOM 상세 설명
2을 참조하세요. 1. 구성요소 생성:

1) 함수 정의 없음

#🎜🎜 #
2) ES5 기본 방식: React.createClass, (이것은 자동으로 바인딩됩니다)
3) ES6 형식: 확장 React.Component, (이 소스는 super()에 있음)# 🎜🎜#

2. 컴포넌트: React의 기능

3. 중요성 모듈식 개발에 대한 구성요소
4. 구성요소의 반환 함수에는 HTML 노드가 하나만 반환됩니다

#🎜🎜 ##🎜🎜 #

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

const React = require(&#39;react&#39;);const ReactDOM = require(&#39;react-dom&#39;);
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")
)

로그인 후 복사

컴포넌트는 매개변수를 통해 전달될 수 있습니다.
반환은 하나의 태그 컨테이너만 허용되지만 태그 컨테이너에는 수많은 태그가 저장될 수 있습니다
#🎜🎜 #참고 프로젝트 이름 및 파일 구조

코드는 다음과 같습니다.

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>
        )
    }
}

로그인 후 복사

}

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

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

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

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

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 중국어 홈페이지
열에서 학습하세요)

4.render

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

7.shouldComponentUpdate

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