기능적 구성 요소 내부의 ReactJS 수명주기 방법

기능적 구성 요소 내부의 ReactJS 수명주기 방법

---

클래스 내부에 구성 요소를 작성하는 대신 함수 구문을 대신 사용하고 싶습니다.

어떻게 오버라이드 (override) 할 componentDidMount, componentWillMount기능적 구성 요소 내부에?
가능할까요?

const grid = (props) => {
    console.log(props);
    let {skuRules} = props;

    const componentDidMount = () => {
        if(!props.fetched) {
            props.fetchRules();
        }
        console.log('mount it!');
    };
    return(
        <Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}>
            <Box title="Sku Promotion">
                <ActionButtons buttons={actionButtons} />
                <SkuRuleGrid 
                    data={skuRules.payload}
                    fetch={props.fetchSkuRules}
                />
            </Box>      
        </Content>  
    )
}

---

편집 :Hooks 기능적 구성 요소의 상태뿐만 아니라 수명주기 종류의 동작을 구현할 수있는 가능성 이 도입되었습니다 . 현재

Hooks는 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수있는 새로운 기능 제안입니다. v16.8.0 의 일부로 React에서 릴리스되었습니다.

useEffect후크는 수명주기 동작을 복제하는 데 사용할 useState수 있으며 기능 구성 요소에 상태를 저장하는 데 사용할 수 있습니다.

다음과 같은 후크에서 사용 사례를 구현할 수 있습니다.

const grid = (props) => {
    console.log(props);
    let {skuRules} = props;

    useEffect(() => {
        if(!props.fetched) {
            props.fetchRules();
        }
        console.log('mount it!');
    }, []); // passing an empty array as second argument triggers the callback in useEffect only after the initial render thus replicating `componentDidMount` lifecycle behaviour

    return(
        <Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}>
            <Box title="Sku Promotion">
                <ActionButtons buttons={actionButtons} />
                <SkuRuleGrid 
                    data={skuRules.payload}
                    fetch={props.fetchSkuRules}
                />
            </Box>      
        </Content>  
    )
}

useEffect구성 요소가 마운트 해제 될 때 실행될 함수를 반환 할 수도 있습니다. 이는 리스너 구독을 취소하는 데 사용할 수 있습니다. componentWillUnmount동작 을 복제하는 데 사용할 수 있습니다.

예 : componentWillUnmount

useEffect(() => {
    window.addEventListener('unhandledRejection', handler);
    return () => {
       window.removeEventListener('unhandledRejection', handler);
    }
}, [])

값을 제공하는 경우 두 번째 인수로 다음 중 하나라도 변경된 경우 콜백을 트리거하기 전에 비교됩니다.

예 : componentDidUpdate

componentDidUpdate(prevProps, prevState) {
     const { counter } = this.props;
     if (this.props.counter !== nextProps.counter) {
      // some action here
     }
}

동등한 후크

useEffect(() => {
     // action here
}, [props.counter]);

---

v16.7.0 이전

기능 구성 요소의 속성은 Reacts 수명주기 함수 또는 this키워드에 액세스 할 수 없다는 것 입니다. React.Component수명주기 함수를 사용하려면 클래스 를 확장해야 합니다.

class Grid extends React.Component  {
    constructor(props) {
       super(props)
    }

    componentDidMount () {
        if(!this.props.fetched) {
            this.props.fetchRules();
        }
        console.log('mount it!');
    }
    render() {
    return(
        <Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}>
            <Box title="Sku Promotion">
                <ActionButtons buttons={actionButtons} />
                <SkuRuleGrid 
                    data={skuRules.payload}
                    fetch={props.fetchSkuRules}
                />
            </Box>      
        </Content>  
    )
  }
}

기능적 구성 요소는 추가 로직없이 구성 요소 만 렌더링하려는 경우에 유용합니다.

---

react-pure-lifecycle 을 사용 하여 기능 구성 요소에 수명주기 함수를 추가 할 수 있습니다 .

예:

import React, { Component } from 'react';
import lifecycle from 'react-pure-lifecycle';

const methods = {
  componentDidMount(props) {
    console.log('I mounted! Here are my props: ', props);
  }
};

const Channels = props => (
<h1>Hello</h1>
)

export default lifecycle(methods)(Channels);

---

해결 방법 1 : 새로운 반응 HOOKS API를 사용할 수 있습니다 . 현재 React v16.8.0에 있음

후크를 사용하면 클래스없이 React의 더 많은 기능을 사용할 수 있습니다. 후크는 이미 알고있는 React 개념 (props, state, context, refs 및 lifecycle)에 대한보다 직접적인 API를 제공합니다 . Hooks는 Recompose로 해결 된 모든 문제를 해결합니다.

작성자의 메모 recompose(acdlite, 2018 년 10 월 25 일) :

안녕하세요! 저는 약 3 년 전에 Recompose를 만들었습니다. 그로부터 약 1 년 후 저는 React 팀에 합류했습니다. 오늘 우리는 Hooks에 대한 제안을 발표했습니다. Hooks는 내가 3 년 전에 Recompose로 해결하려했던 모든 문제를 해결 해줍니다. 이 패키지의 활성 유지 관리를 중단하고 (향후 React 릴리스와의 호환성을위한 버그 수정 또는 패치 제외) 사람들이 대신 Hooks를 사용할 것을 권장합니다. Recompose를 사용하는 기존 코드는 계속 작동하며 새로운 기능을 기대하지 마십시오.

해결 방법 2 :

후크를 지원하지 않는 리 액트 버전을 사용하고 있다면 걱정하지 마세요 recompose. 대신 (기능 컴포넌트 및 상위 컴포넌트를위한 React 유틸리티 벨트)를 사용하세요. 기능 구성 요소 recompose에 연결 lifecycle hooks, state, handlers etc하는 데 사용할 수 있습니다 .

다음 은 수명주기 HOC (재구성에서)를 통해 수명주기 메서드 를 연결하는 렌더링없는 구성 요소입니다 .

// taken from https://gist.github.com/tsnieman/056af4bb9e87748c514d#file-auth-js-L33

function RenderlessComponent() {
  return null; 
}

export default lifecycle({

  componentDidMount() {
    const { checkIfAuthed } = this.props;
    // Do they have an active session? ("Remember me")
    checkIfAuthed();
  },

  componentWillReceiveProps(nextProps) {
    const {
      loadUser,
    } = this.props;

    // Various 'indicators'..
    const becameAuthed = (!(this.props.auth) && nextProps.auth);
    const isCurrentUser = (this.props.currentUser !== null);

    if (becameAuthed) {
      loadUser(nextProps.auth.uid);
    }

    const shouldSetCurrentUser = (!isCurrentUser && nextProps.auth);
    if (shouldSetCurrentUser) {
      const currentUser = nextProps.users[nextProps.auth.uid];
      if (currentUser) {
        this.props.setCurrentUser({
          'id': nextProps.auth.uid,
          ...currentUser,
        });
      }
    }
  }
})(RenderlessComponent);

---

React LifeCycle을 사용하려면 Class를 사용해야합니다.

견본:

import React, { Component } from 'react';

class Grid extends Component {

 constructor(props){
  super(props)
 }

 componentDidMount () { /* do something */ }

 render () { 
   return <h1>Hello</h1>
 }

}

---

문서에 따르면 :

import React, { useState, useEffect } from 'react'
// Similar to componentDidMount and componentDidUpdate:

useEffect(() => {


});

React 문서 참조

---

create-react-class 모듈을 사용할 수 있습니다. 공식 문서

물론 먼저 설치해야합니다.

npm install create-react-class

다음은 작동하는 예입니다.

import React from "react";
import ReactDOM from "react-dom"
let createReactClass = require('create-react-class')


let Clock = createReactClass({
    getInitialState:function(){
        return {date:new Date()}
    },

    render:function(){
        return (
            <h1>{this.state.date.toLocaleTimeString()}</h1>
        )
    },

    componentDidMount:function(){
        this.timerId = setInterval(()=>this.setState({date:new Date()}),1000)
    },

    componentWillUnmount:function(){
        clearInterval(this.timerId)
    }

})

ReactDOM.render(
    <Clock/>,
    document.getElementById('root')
)

---

당신이 사용하는 경우 사용이 후크 반응 할 수 16.8이 ... 반응 후크가 당신을하자 함수입니다 반작용 "에 훅"기능 구성 요소에서 상태 및 라이프 사이클 기능 반응 ... 문서

참고 URL : https://stackoverflow.com/questions/44506207/reactjs-lifecycle-method-inside-a-functional-component