ReactJS vòng đời bên trong một thành phần chức năng

Question

Thay vì viết các thành phần của tôi bên trong một lớp, vì chúng câm. Tôi chủ yếu viết những thứ này bên trong một hàm. Nhưng làm thế nào để ghi đè lên componentDidMount, các thành phần chức năng componentWillMount? Thậm chí có thể không?

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

Answer 1

Thuộc tính của các thành phần chức năng là chúng không có quyền truy cập vào chức năng vòng đời phản ứng hoặc từ khóa this. Bạn cần mở rộng lớp React.Component nếu bạn muốn sử dụng chức năng vòng đời.

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

Các thành phần chức năng hữu ích khi bạn chỉ muốn kết xuất thành phần của mình mà không cần thêm logic.

Answer 2

Nếu bạn cần sử dụng React LifeCycle, bạn cần sử dụng Class.

mẫu:

import React, { Component } from 'react'; 

class Grid extends Component { 

constructor(props){ 
    super(props) 
} 

componentDidMount() { /* do something */ } 

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

} 

Answer 3

Bạn có thể sử dụng react-pure-lifecycle để thêm chức năng vòng đời cho các thành phần chức năng.

Ví dụ:

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