ここでラップされたコンポーネント

Question

上焼成ないJSライフサイクルメソッドを反応させる成分である：ここ

export default class MyComponent extends React.Component { 
    componentWillReceiveProps(newProps) { 
    console.log('RECEIVED PROPS'); 
    } 

    render() { 
    return <div>{this.props.foo}</div> 
    } 
} 

は、ラッパー/高次成分である：ここ

const withSomething = (ComponentToWrap) => { 
    render() { 
     return <ComponentToWrap {...this.props} /> 
    } 
    } 

はMyComponentのをラップする機能要素でありますin withSomething：

export default function WrappedComponent(props) { 
    const Component = withSomething(MyComponent); 
    return <Component ... some props ... /> 
} 

結果：小道具関連のライフサイクル機能（componentWillReceiveProp私が小道具を更新しても、MyComponentの中では決して起動しません。

これは何ですか？小道具ベースのライフサイクルメソッドはラップされたコンポーネントで動作しませんか？

Answer 1

ラップされたコンポーネントを作成する行は機能コンポーネントに含まれているため、機能コンポーネントがレンダリングするたびに基本的に新しいコンポーネントが作成されるという問題があります。

この行は、メソッドのレンダリングWrappedComponentの中に含まれてしまう：

const Component = withSomething(MyComponent); 

...コンポーネントは、すべてのレンダリングに上書きされることを意味します。

もう一つの手掛かりは、componentDidMount（）をMyComponentに配置することです。これは、小道具が更新されるたびに発生します。

ソリューションは、ラップされたコンポーネントを機能コンポーネントの外側に作成するか、通常のクラスコンポーネントを使用している場合はレンダリングメソッドの外に作成することです。