简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

React 시작하기: React에서 구성 요소를 만드는 방법

不言
풀어 주다： 2018-08-22 17:41:50
원래의
1483명이 탐색했습니다.

컴포넌트 생성

컴포넌트 생성 전 다음 사항에 주의하시기 바랍니다.

  1. 컴포넌트 이름의 첫 글자는 대문자로 표기해야 합니다.

  2. 컴포넌트에서 반환되는 JSX는 루트만 가능합니다. 모든 콘텐츠는 하나의 요소를 사용해야 합니다.

1. 상태 비저장 기능 구성 요소

상태 비저장 기능 구성 요소는 업적이 기능에 의해 생성된다는 것을 이해하여 코드를 더 읽기 쉽고, 간소화하고, 편리하게 만들고, 중복성을 줄입니다. stateless 구성 요소는 다음과 같은 특성을 갖습니다.

  1. 구성 요소를 인스턴스화할 수 없으며 전반적인 렌더링이 향상됩니다.

  2. 구성 요소가 인스턴스화되지 않았기 때문에 이 개체에 액세스할 수 없으므로 이 개체에 액세스할 수 없습니다

  3. 컴포넌트에는 생명주기가 없습니다

  4. 상태가 없는 컴포넌트는 입력 prop에만 접근할 수 있으며 상태는 없습니다

import React from 'react'
import { connect } from 'dva';

 function CreateComponent(props) {
   console.log(props);
   return (
     <p>
        <span>{props.name}今年{props.age}岁</span>
     </p>
   )
 }

export default connect(state => ({
  name:'小明',
  age:15
}))(CreateComponent);
로그인 후 복사

2. React.Component 클래스 컴포넌트

각 컴포넌트 클래스는 렌더링 메소드를 구현해야 합니다. 여기서 이 렌더링 메소드는 다음을 반환해야 합니다. JSX 요소는 모든 콘텐츠를 가장 바깥쪽 요소로 래핑해야 합니다. 아래와 같이 여러 JSX 요소를 나란히 반환하는 것은 불법입니다. 

import React from 'react'

class CreateComponent extends React.Component {
     render() {
       return(
         <p>
           <h2>标题</h2>
            <ul>
              <li>首先</li>
              <li>其次</li>
              <li>最后</li>
            </ul>
         </p>
       )
     }
}

export default CreateComponent;
로그인 후 복사

위 예에서는 h2 요소와 요소 모두에 p를 사용합니다. ul 정리

1. 컴포넌트 이벤트 모니터링

import React from 'react'

class CreateComponent extends React.Component {

   clickFunc = (e) => {
     console.log("监听:",e.target.innerHTML);
   }

   clickValue = (value) => {
     console.log(value);
   }
    render() {
      return (
       <p>
         <a onClick={this.clickFunc}>监听事件</a>
         <br/>
         <a onClick={this.clickValue.bind(this,123)}>this对象</a>
      </p>
      )
    }

}

export default CreateComponent;
로그인 후 복사

위는 이벤트 모니터링 및 매개변수 전달의 예입니다

2. 컴포넌트 상태 및 setState

보통 컴포넌트에서는 내부 상태를 나타내는 데 사용됩니다. , setState는 상태의 매개변수를 변경하는 데 사용됩니다(예: 

import React from 'react'

class CreateComponent extends React.Component {
  state = {
    flag : true
  }
   clickValue = () => {
     this.setState({
       flag: !this.state.flag
     })
   }
    render() {
      return (
       <p>
         <span>flag的值为：{this.state.flag ? '真' : '假'}</span>
         <br/>
         <button onClick={this.clickValue}>改变flag值</button>
      </p>
      )
    }

}

export default CreateComponent;
로그인 후 복사

3). 구성 요소

props는 구성 요소 내부의 속성을 변경할 수 없습니다. 예를 들어, 컴포넌트를 생성한 후 다음과 같이 다른 컴포넌트에서 이 컴포넌트를 호출합니다. 

import React from 'react';

function NewComponent(props) {
  return (
    <p>
       {props.content}
    </p>
  );
}


export default NewComponent;
로그인 후 복사

컴포넌트 NewComponent를 생성한 후 다음과 같이 호출합니다. 

import React from 'react'
import NewComponent from './newComponent.js'

class CreateComponent extends React.Component {
    render() {
      return (
       <p>
         <NewComponent content={&#39;我是内容&#39;} />
      </p>
      )
    }

}

export default CreateComponent;
로그인 후 복사

여기에서 props가 속성임을 알 수 있습니다. ​​​​구성 요소에서 가져오는 값은 실제로 외부 구성 요소를 구성할 수 있게 하며 상태는 구성 요소가 자체적으로 제어하는 ​​상태입니다.

4 구성 요소의 수명 주기

생성자 구성 요소 초기화:

constructor 일부 매개변수 속성 등을 초기화합니다.

comComponentWillMount 컴포넌트 렌더링 전:

comComponentWillMount 이 함수는 React16.3.0 이후로 점차 사용되지 않습니다. 구성 요소 다음에 실행됩니다. 렌더링 및 데이터 로드 가능

render 컴포넌트 렌더링:

render 컴포넌트 렌더링 표시 페이지 

import React from 'react'

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化')
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }


    render() {
      console.log('render：页面渲染');
      return (
       <p>
         页面渲染
      </p>


      )
    }

}

export default CreateComponent;
로그인 후 복사
출력 결과: 
construct:页面初始化
componentWillMount：页面将要渲染
render：页面渲染
componentDidMount：页面渲染结束
로그인 후 복사
comComponentWillUnmount 컴포넌트 삭제

comComponentWillUnmount 함수는 컴포넌트가 삭제되기 전에 실행되는 함수입니다. 

import React from 'react';

class NewComponent extends React.Component {
  componentWillUnmount() {
    console.log('componentWillUnmount:将要从页面中删除');
  }

  render() {
    return (
      <p>
         {this.props.content}
      </p>
    );
  }

}

export default NewComponent;
로그인 후 복사
컴포넌트 NewComponent를 생성한 후 CreateComponent 컴포넌트에 이 컴포넌트를 추가합니다. 
import React from 'react'
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化');
    this.state = {
      content:'测试组件',
      isDelete:false
    }
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }

  deleteFunc = () => {
    this.setState({
      isDelete:true
    })
  }


    render() {
      console.log('render：页面渲染');
      return (
       <p>
         页面渲染
         <input type="button" value=&#39;删除&#39; onClick={this.deleteFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </p>


      )
    }

}

export default CreateComponent;
로그인 후 복사
삭제 버튼을 클릭하면 NewComponent 컴포넌트가 삭제되고, componentWillUnmount 함수가 실행됩니다. before delete

출력 결과: 

construct:页面初始化
componentWillMount：页面将要渲染
render：页面渲染
componentDidMount：页面渲染结束
componentWillUnmount:将要从页面中删除
로그인 후 복사

위의 라이프사이클은 우리가 일반적으로 사용하는 컴포넌트 라이프사이클입니다. 라이프사이클에도 업데이트 단계의 라이프사이클이 있지만 비교적 거의 사용되지 않습니다.

shouldComponentUpdate(nextProps, nextState)

컴포넌트를 다시 렌더링할지 여부를 제어하려면 이 메서드를 사용하세요. false가 반환되면 아래와 같이 다시 렌더링되지 않습니다.

import React from 'react'
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化');
    this.state = {
      content:'测试组件',
      isDelete:false
    }
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }

  shouldComponentUpdate(nextProps, nextState){
    if(nextState.isDelete){
      return false;
    }

  }

  deleteFunc = () => {
    this.setState({
      isDelete:true
    })
  }


    render() {
      console.log('render：页面渲染');
      return (
       <p>
         页面渲染
         <input type="button" value=&#39;删除&#39; onClick={this.deleteFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </p>


      )
    }

}

export default CreateComponent;
로그인 후 복사
삭제 버튼을 클릭하면. , 페이지가 렌더링되지 않습니다. 이는 shouldComponentUpdate에서 반환 값이 false로 설정되어 있기 때문입니다. 반환 값이 false이면 페이지를 다시 렌더링할 수 없습니다. 이 함수의 첫 번째 매개변수는 최신 props를 나타내고, 두 번째 매개변수는 최신 상태를 나타냅니다.
comComponentWillReceiveProps(nextProps)

구성요소는 상위 구성요소로부터 새 props를 받기 ​​전에 호출됩니다. 함수의 nextProps 매개변수는

NewComponent 구성 요소에서: 
import React from 'react';

class NewComponent extends React.Component {
  componentWillUnmount() {
    console.log('componentWillUnmount:将要从页面中删除');
  }

  componentWillReceiveProps(nextProps){
    console.log(nextProps);
  }

  render() {
    return (
      <p>
         {this.props.content}
      </p>
    );
  }

}

export default NewComponent;
로그인 후 복사
CreateComponent 구성 요소에서: 
import React from 'react'
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化');
    this.state = {
      content:'测试组件',
      isDelete:false
    }
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }

  changeFunc = () => {
    this.setState({
      content:'文字修改'
    })
  }


    render() {
      console.log('render：页面渲染');
      return (
       <p>
         页面渲染
         <input type="button" value=&#39;修改content&#39; onClick={this.changeFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </p>


      )
    }

}

export default CreateComponent;
로그인 후 복사

그러나, componentWillReceiveProps는 React16.3.0이 시작된 후에 더 이상 사용되지 않습니다.

comComponentWillUpdate:

이 메서드는 구성 요소가 다시 호출되기 전에 호출됩니다. 렌더링되고 React16.3.0에서 호출됩니다. 시작 후 더 이상 사용되지 않습니다

comComponentDidUpdate:

구성 요소가 다시 렌더링되고 변경 사항이 실제 DOM에 적용됩니다. , componentWillReceiveProps 및 componentWillMount는 React116.3.0 이후 더 이상 사용되지 않습니다.

관련 권장 사항:

React 구성 요소 수명 주기 인스턴스 분석

React 구성 요소 Dragact 0.1.4 자세한 설명


위 내용은 React 시작하기: React에서 구성 요소를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
javascript react.js
원천：php.cn
이전 기사：js에는 몇 개의 루프 메소드가 있습니까? js의 7가지 루프 메서드 소개(코드 포함) 다음 기사：React에서 키값의 역할은 무엇이며, 키값의 용도는 무엇인가요? (코드 포함)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！