功能組件內的ReactJS生命週期方法

而不是在類中編寫我的組件，因爲它們是愚蠢的。我主要在一個函數中寫這些。但是，我如何覆蓋componentDidMount，componentWillMount功能組件？它甚至有可能嗎？功能組件內的ReactJS生命週期方法

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> 
    ) 
}

來源

2017-06-12 Aftab Naveed

我想原因應該downvoting問題或答案來提供。 –

我認爲這是一個很好的問題，雖然課堂上的音符是啞巴是個人意見，並可能已經贏得了downvoting :) – Joehannes

瞭解，但這是REACT社區稱之爲:-) –

功能部件的性能是它們沒有獲得反應，有生命週期的功能或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> 
    ) 
    } 
}

當您只想渲染組件而不需要額外的邏輯時，功能組件很有用。

來源

2017-06-12 18:22:50

正如我所說的，你的組件中有一個邏輯，你的需求希望你使用一個生命週期函數，而你不能用functioanl組件做到這一點。所以最好使用課堂。當您的組件不包含額外的邏輯時使用功能組件 –

您的答案更詳細。感謝您的解釋。 –

高興地幫助:)，很高興我能夠解釋 –

如果您需要使用React LifeCycle，則需要使用Class。

樣品：

import React, { Component } from 'react'; 

class Grid extends Component { 

constructor(props){ 
    super(props) 
} 

componentDidMount() { /* do something */ } 

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

}

來源

2017-06-12 18:24:48

我不想使用這個類。 –

但是，componentDidMount只是在類中工作：/ –

嗯有道理謝謝你。 –

您可以使用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)(Grid);

來源

2018-01-15 14:04:57 Yohann

功能組件內的ReactJS生命週期方法

回答

相關問題