집 >웹 프론트엔드 >JS 튜토리얼 >React Life Cycle에 대한 포괄적인 이해(코드 포함)

React Life Cycle에 대한 포괄적인 이해(코드 포함)

不言앞으로: 2019-04-03 10:05:562740검색

이 글은 리액트 라이프사이클(코드 포함)에 대한 포괄적인 이해를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

React 구성 요소의 수명 주기는 인스턴스화, 존재 및 소멸의 세 부분으로 나뉩니다.

인스턴스화 단계

클라이언트 측에서 렌더링할 때 다음이 순서대로 호출됩니다#🎜🎜 ##🎜 🎜#

getDefaultProps()

getInitialState()
comComponentWillMount()
render()
comComponentWillMount()
render()

참고: componentDidMount()는 렌더링되지 않습니다. 서버 측;# 🎜🎜#

getDefaultProps

각 구성 요소 인스턴스에 대해 이 메서드는 구성 요소 클래스의 모든 후속 응용 프로그램에서 한 번만 호출됩니다. , getDefaultPops는 다시 호출되지 않으며 반환된 객체는 기본 props 값을 설정하는 데 사용될 수 있습니다.

var Hello = React.creatClass({
    getDefaultProps: function(){
        return {
            name: 'pomy',
            git: 'dwqs'
        }
    },
    
    render: function(){
        return (
            <p>Hello,{this.props.name},git username is {this.props.dwqs}</p>
        )
    }
});

ReactDOM.render(<Hello />, document.body);

var data = [{title: 'Hello'}];
<Hello data={data} />

var data = [{title: 'Hello'}];
var Hello = React.render(<Demo />, document.body);
Hello.setProps({data:data});

그러나 setProps는 하위 구성 요소 또는 구성 요소 트리에서만 호출할 수 있습니다. this.setProps를 호출하거나 this.props를 직접 수정하지 마세요. 읽기 전용 데이터로 처리합니다.

React는 속성 유형을 정의하는 데 사용되는 구성 개체인 propTypes를 통해 속성을 확인하는 방법을 제공합니다.

var survey = React.createClass({
    propTypes: {
        survey: React.PropTypes.shape({
            id: React.PropTypes.number.isRequired
        }).isRequired,
        onClick: React.PropTypes.func,
        name: React.PropTypes.string,
        score: React.PropTypes.array
        ...
    },
    
    //...
})

또는

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class BetterImage extends Component{...}

BetterImage.PropTypes={
  src: PropTypes.string,
  center: PropTypes.bool,
  loadingImage: PropTypes.string,
  defaultImage: PropTypes.string,
  onLoad: PropTypes.func,
  onError: PropTypes.func,
  onComplete: PropTypes.func
}
BetterImage.defaultProps={
  ....
}

#🎜 🎜#

getInitialState

구성 요소의 각 인스턴스에 대해 이 메서드는 한 번만 호출되어 각 인스턴스의 상태를 초기화할 수 있습니다. 구성 요소의 소품. 각 React 구성 요소에는 자체 상태가 있습니다. 이는 상태가 구성 요소 내부에만 존재하는 반면 prop은 모든 인스턴스에서 공유된다는 점에서 prop과 다릅니다.

getInitialState와 getDefaultPops 호출에는 차이가 있습니다. getDefaultPops는 구성 요소 클래스에 대해 한 번만 호출되며 이 클래스의 후속 애플리케이션은 호출되지 않지만 각 구성 요소 인스턴스에 대해 getInitialState가 호출됩니다. 호출되며, 한 번만 호출됩니다.

var LikeButton = React.createClass({
  //初始化State
  getInitialState: function() {
    return {liked: false};
  },
  
  handleClick: function(event) {
    //设置修改State
    this.setState({liked: !this.state.liked});
  },

  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

상태가 수정될 때마다 구성 요소가 다시 렌더링됩니다. 인스턴스화 후 구성 요소 는 상태를 통해 업데이트되며 다음 방법이 적용됩니다. 순서대로 호출됩니다:

1、shouldComponentUpdate
2、componentWillUpdate
3、render
4、componentDidUpdate

comComponentWillMount

은 클라이언트와 클라이언트 모두에서 렌더링 전에 호출됩니다. 섬기는 사람. React 공식 출시 버전 v16.3. 이번 업데이트에서는 얼마 전 뜨겁게 논의되었던 새로운 Context API 외에도 새로 도입된 두 가지 라이프사이클 함수 getDerivedStateFromProps 및 getSnapshotBeforeUpdate와 세 가지 라이프사이클 함수인 componentWillMount가 향후 v17.0 버전에서 제거됩니다.

이 수명 주기에서 다음과 같은 문제에 직면하게 됩니다:

a. 첫 번째 화면에 데이터가 없으면 흰색 화면이 표시됩니다.

React 애플리케이션에서 페이지가 처음 렌더링될 때 비동기 데이터를 가져오지 못해 발생하는 흰색 화면을 방지하기 위해 많은 개발자는 흰색 화면을 방지하고 비동기 요청의 전송 시간을 앞당기기 위해 코드의 데이터 요청 부분을 componentWillMount에 배치합니다. 그러나 실제로는 componentWillMount가 실행된 후 첫 번째 렌더링이 이미 시작되었으므로, componentWillMount가 실행될 때 비동기 데이터를 얻지 못했다면 페이지가 처음 렌더링될 때 여전히 비동기 데이터가 없는 상태가 됩니다. 즉, 구성 요소는 처음 렌더링될 때 항상 비동기 데이터가 없는 상태이므로 데이터 요청이 어디로 전송되든 이 문제에 대한 직접적인 해결책은 없습니다. 데이터 요청을 조기에 전송하는 것과 관련하여 관계자는 componentWillMount 대신 구성 요소 생성자에 코드의 데이터 요청 부분을 배치하는 것을 권장합니다. 사용자 경험을 개선하기 위해 사용된 두 가지 솔루션이 있는 경우:

방법 1: 비동기 요청 구성 요소, nprogress를 사용하여 로딩 애니메이션을 추가합니다.

import React, { Component } from 'react'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import './customNprogress.styl'

NProgress.configure({ showSpinner: false })

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    state = {
      component: null
    }

    async componentDidMount() {
      NProgress.start()
      const { default: component } = await importComponent()
      NProgress.done()

      this.setState({ component })
    }

    render() {
      const C = this.state.component

      return C ? <C {...this.props} /> : null
    }
  }

  return AsyncComponent
}

const AsyncNotFound = asyncComponent(() => import(/* webpackChunkName: "NotFound" */ '@/routes/NotFound'))

방법 2: onreadystatechange를 사용하여 ReadyState를 모니터링하고 리소스 로드가 완료되기 전에 프레임만 포함된 정적 페이지를 로드합니다. 데이터 요청이 완료되면 실제 홈페이지로 경로가 전환됩니다. function listen () { if (document.readyState == 'complete') { // 资源加载完成 ReactDom.render( <Provider store={store}> <Router> <Route path="/" component={Index}/> </Router> </Provider>, document.getElementById('root') ) } else { // 资源加载中 ReactDom.render( <Provider store={store}> <Router> <Route path="/" component={FirstScreen}/> </Router> </Provider>, document.getElementById('root') ) } } document.onreadystatechange = listen
구체적인 참고사항으로 React 첫 화면 로딩 흰색 화면 문제 해결

b. 이벤트 구독

또 다른 일반적인 사용 사례는 구독입니다. componentWillMount 이벤트에서, 그리고 componentWillUnmount에서 해당 이벤트 구독을 취소합니다. 그러나 실제로 React는 componentWillMount가 호출된 후 동일한 구성 요소의 componentWillUnmount도 호출된다는 것을 보장할 수 없습니다. 현재 버전의 예는 서버 측에서 렌더링할 때, componentWillUnmount가 서버 측에서 호출되지 않으므로, componentWillMount에서 이벤트를 구독하면 서버 측에서 메모리 누수가 직접 발생한다는 것입니다. 반면에 React가 나중에 비동기 렌더링 모드를 켠 후에는, componentWillMount가 호출된 후 다른 트랜잭션에 의해 컴포넌트 렌더링이 중단될 가능성이 높으며, 이로 인해 componentWillUnmount가 호출되지 않습니다. **comComponentDidMount에는 이러한 문제가 없습니다. **

렌더링

该方法会创建一个虚拟DOM，用来表示组件的输出。对于一个组件来讲，render方法是唯一一个必需的方法。render方法需要满足下面几点：

只能通过 this.props 和 this.state 访问数据（不能修改）
可以返回 null,false(这种场景下，react渲染一个