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

컴포넌트 생성

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

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>
           </p><h2 id="标题">标题</h2>
            

              
• 首先
              
• 其次
              
• 最后
            

                 )      } } 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>监听事件</a>
         <br>
         <a>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>改变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></newcomponent>
      </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>
         {!this.state.isDelete?(
          <newcomponent></newcomponent>
         ):(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>
         {!this.state.isDelete?(
          <newcomponent></newcomponent>
         ):(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>
         {!this.state.isDelete?(
          <newcomponent></newcomponent>
         ):(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!