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

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

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

인스턴스화 단계

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

getDefaultProps()
  • getInitialState()
  • comComponentWillMount()
  • render()
  • # ㅋㅋㅋ 🎜🎜#getInitialState ()
  • 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></hello>, document.body);
  • 부품을 장착할 때 소품을 설정할 수도 있습니다.
  • var data = [{title: 'Hello'}];
    <hello></hello>
  • 또는 setProps를 호출하여(일반적으로 호출할 필요 없음) props를 설정합니다
  • var data = [{title: 'Hello'}];
    var Hello = React.render(<demo></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>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <likebutton></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></c> : null
        }
      }
    
      return AsyncComponent
    }
    
    const AsyncNotFound = asyncComponent(() => import(/* webpackChunkName: "NotFound" */ '@/routes/NotFound'))
  • 방법 2: onreadystatechange를 사용하여 ReadyState를 모니터링하고 리소스 로드가 완료되기 전에 프레임만 포함된 정적 페이지를 로드합니다. 데이터 요청이 완료되면 실제 홈페이지로 경로가 전환됩니다.
      function listen () {
        if (document.readyState == 'complete') { // 资源加载完成
            ReactDom.render(
                <provider>
                    <router>
                        <route></route>
                    </router>
                </provider>,
                document.getElementById('root')
            )
        } else { // 资源加载中
            ReactDom.render(
                <provider>
                    <router>
                        <route></route>
                    </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渲染一个
    • 只能出现一个顶级组件,不能返回一组元素
    • 不能改变组件的状态
    • 不能修改DOM的输出

    render方法返回的结果并不是真正的DOM元素,而是一个虚拟的表现,类似于一个DOM tree的结构的对象。react之所以效率高,就是这个原因。

    render执行情况如下:

    1. 首次加载
    2. setState改变组件内部state。
       注意: 此处是说通过setState方法改变。
    3. 接受到新的props

    注意:因为数据是异步的情况,会导致组件重复渲染

    componentDidMount

    该方法不会在服务端被渲染的过程中调用。该方法被调用时,已经渲染出真实的 DOM,可以再该方法中通过 this.getDOMNode() 访问到真实的 DOM(推荐使用 ReactDOM.findDOMNode())。

    var data = [..];
    var comp = React.createClass({
        render: function(){
            return <imput></imput>
        },
        componentDidMount: function(){
            $(this.getDOMNode()).autoComplete({
                src: data
            })
        }
    })

    由于组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性:

    var Area = React.createClass({
        render: function(){
            this.getDOMNode(); //render调用时,组件未挂载,这里将报错
            
            return <canvas>
        },
        componentDidMount: function(){
            var canvas = this.refs.mainCanvas.getDOMNode();
            //这是有效的,可以访问到 Canvas 节点
        }
    })</canvas>

    需要注意的是,由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。如果ref回调函数以inline函数的方式来指定,那么在组件更新的时候ref回调会被调用2次。第一次回调的时候传入的参数是null,而第二次的时候才真正的传入DOM节点

    更多了解ref使用
    从React官方文档看 refs 的使用和未来
    获取真实dom,并获取dom css 三种方法

    存在期

    此时组件已经渲染好并且用户可以与它进行交互,比如鼠标点击,手指点按,或者其它的一些事件,导致应用状态的改变,你将会看到下面的方法依次被调用;

    1. componentWillReceiveProps()
    2. shouldComponentUpdate()
    3. componentWillUpdate()
    4. render()
    5. componentDidUpdate()

    componentWillReceiveProps

    当props发生变化时执行,初始化render时不执行,在这个回调函数里面,你可以根据属性的变化,通过调用this.setState()来更新你的组件状态,旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的,并不会触发额外的render调用。

    componentWillReceiveProps: function(nextProps){
        if(nextProps.checked !== undefined){
            this.setState({
                checked: nextProps.checked
            })
        }
    }

    了解更多点击此处

    shouldComponentUpdate

    shouldComponentUpdate函数是重渲染时render()函数调用前被调用的函数,它接受两个参数:nextProps和nextState,分别表示下一个props和下一个state的值。并且,当函数返回false时候,阻止接下来的render()函数及后面的 componentWillUpdate,componentDidUpdate 方法的调用,阻止组件重渲染,而返回true时,组件照常重渲染。

    了解更多点击此处--真的讲的好

    componentWillUpdate

    这个方法和 componentWillMount 类似,在组件接收到了新的 props 或者 state 即将进行重新渲染前,componentWillUpdate(object nextProps, object nextState) 会被调用,注意不要在此方面里再去更新 props 或者 state。

    componentDidUpdate

    这个方法和 componentDidMount 类似,在组件重新被渲染之后,componentDidUpdate(object prevProps, object prevState) 会被调用。可以在这里访问并修改 DOM。

    销毁

    componentWillUnmount

    每当React使用完一个组件,这个组件必须从 DOM 中卸载后被销毁,此时 componentWillUnmout 会被执行,完成所有的清理和销毁工作,在 componentDidMount 中添加的任务都需要再该方法中撤销,如创建的定时器或事件监听器。

    当再次装载组件时,以下方法会被依次调用:

    1、getInitialState
    2、componentWillMount
    3、render
    4、componentDidMount

    React v.16生命周期

    constructor(props) // 初始化参数
    
    componentWillMount()
    
    render() // 第一次渲染 
    
    componentDidMount()
    
    **当父组件向子组件传入props发生改变后,依次调用**
    
    componentWillReceiveProps(nextProps)
    
    shouldComponentUpdate(nextProps, nextState) 
    
    componentWillUpdate()
    
    render() //子组件更新渲染
    
    componentDidUpdate()
    
    **当组件自身state发生变化后**
    
    componentWillUpdate()
    
    render() //组件再次更新渲染
    
    componentDidUpdate()
    
    
    当组件卸载
    
    componentWillUnmount()

    与低于React16版本的比较

    1. React16 새로운 라이프 사이클은 더 이상 사용되지 않는 세 가지 후크 함수(comComponentWillMount, componentWillReceivePorps, componentWillUpdate)를 대체하기 위해 getDerivedStateFromProps, getSnapshotBeforeUpdate를 추가했습니다.
    2. #🎜 🎜#React16은 이 세 가지 후크 기능을 삭제하지 않았지만 새로운 후크 기능(getDerivedStateFromProps, getSnapshotBeforeUpdate)과 혼합할 수 없습니다. React17은 componentWillMount, componentWillReceivePorps, componentWillUpdate
    3. #🎜🎜 #
    4. 오류 처리를 추가했습니다. (comComponentDidCatch)
    5. [관련 권장 사항: #🎜🎜 #react 비디오 튜토리얼
    6. ]#🎜🎜 #

    위 내용은 React Life Cycle에 대한 포괄적인 이해(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명
    이 기사는 segmentfault에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
    JavaScript의 역할 : 웹 대화식 및 역동적 인 웹JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AM

    JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.

    C 및 JavaScript : 연결이 설명되었습니다C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

    C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

    웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AM

    JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

    Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AM

    Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

    JavaScript 통역사 및 컴파일러에서 C/C의 역할JavaScript 통역사 및 컴파일러에서 C/C의 역할Apr 20, 2025 am 12:01 AM

    C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

    자바 스크립트 행동 : 실제 예제 및 프로젝트자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

    실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

    JavaScript 및 웹 : 핵심 기능 및 사용 사례JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

    웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

    JavaScript 엔진 이해 : 구현 세부 사항JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM

    보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

    See all articles

    핫 AI 도구

    Undresser.AI Undress

    Undresser.AI Undress

    사실적인 누드 사진을 만들기 위한 AI 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    Video Face Swap

    Video Face Swap

    완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

    뜨거운 도구

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    SublimeText3 영어 버전

    SublimeText3 영어 버전

    권장 사항: Win 버전, 코드 프롬프트 지원!

    SublimeText3 Linux 새 버전

    SublimeText3 Linux 새 버전

    SublimeText3 Linux 최신 버전

    WebStorm Mac 버전

    WebStorm Mac 버전

    유용한 JavaScript 개발 도구

    mPDF

    mPDF

    mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.