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 />, document.body);

부품을 장착할 때 소품을 설정할 수도 있습니다.

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

또는 setProps를 호출하여(일반적으로 호출할 필요 없음) props를 설정합니다

• 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渲染一个
• 只能出现一个顶级组件，不能返回一组元素
• 不能改变组件的状态
• 不能修改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 .. />
    },
    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 ref=&#39;mainCanvas&#39;>
    },
    componentDidMount: function(){
        var canvas = this.refs.mainCanvas.getDOMNode();
        //这是有效的，可以访问到 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를 추가했습니다.
#🎜 🎜#React16은 이 세 가지 후크 기능을 삭제하지 않았지만 새로운 후크 기능(getDerivedStateFromProps, getSnapshotBeforeUpdate)과 혼합할 수 없습니다. React17은 componentWillMount, componentWillReceivePorps, componentWillUpdate
2. #🎜🎜 #
오류 처리를 추가했습니다. (comComponentDidCatch)

4. [관련 권장 사항: #🎜🎜 #react 비디오 튜토리얼
]#🎜🎜 #

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