[解決済み] 関数内のReactJSライフサイクルメソッド Component

質問

コンポーネントをクラス内に書く代わりに、関数構文を使いたいのですが、どうすればいいですか？

をオーバーライドするにはどうすればよいですか？ 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 は、機能的なComponentsに、状態だけでなく、ライフサイクルのような振る舞いを実装することが可能である。現在では

フックは、ステートや他の機能を使用するための新しい機能提案です。 クラスを書かずにReactの機能を使うことができます。これらはReactの一部としてリリースされています。 v16.8.0

useEffect フックは、ライフサイクルの動作を再現するために使用することができ、また useState は、ファンクションコンポーネントに状態を保存するために使用することができます。

基本的な構文です。

useEffect(callbackFunction, [dependentProps]) => cleanupFunction

のようなフックでユースケースを実装することができます。

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);
    }
}, [])

を作るには useEffect 特定のイベントを条件とする場合、値の配列を与えて変化をチェックすることができます。

例：componentDidUpdate

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

フック相当

useEffect(() => {
     // action here
}, [props.counter]); // checks for changes in the values in this array

この配列を含める場合は、コンポーネントスコープから時間経過とともに変化するすべての値 (props、state) を含めるようにしてください。

を使用するには、いくつかの微妙な点があります。 useEffect API をチェックアウトしてください。 Here .

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

関数コンポーネントは、余分なロジックを必要とせず、Componentのレンダリングのみを行いたい場合に有効です。