Re-rendering React Component

Question

私はshouldComponentUpdate()を使う必要がある反応クラスを持っています。これは、コンポーネントとその親の間の無限ループを防ぐためです。

深いクローンnextPropsがthis.propsと等しいかどうかを確認するだけで、そうでない場合はコンポーネントを更新します。

これまでのところ、とても良いです。 （？）

class Child extends Component { 
    onComponentUpdate = (e) => { 
    this.props.update(e) 
    } 
    shouldComponentUpdate(nextProps, nextState) { 
    return JSON.stringify(nextProps) !== JSON.stringify(this.props) 
    } 
    render() { 
    return (
     <div> 
     // some code that might trigger onComponentUpdate() 
     </div> 
    ); 
    } 
} 

親コンポーネントでは、特定の小道具を変更せずに子を再レンダリングすることができます。私が今やったことは、州のカウンターを変えて小道具として子供に渡していることです。私はカウンターそのものと何もしません。子どもが更新するように小道具が実際に変更されたことは、子どもの目安に過ぎません。

class Parent extends Component { 
    constructor() { 
    super() 
    this.state = { counter: 0 } 
    } 
    otherChildChanged =() => { 
    this.setState({ counter: this.state.counter + 1 }) 
    } 
    render() { 
    return (
     <div> 
     <Child 
      counter={this.state.counter} 
      update={"some function"} 
      other={"props"} 
     > 
     </Child> 
     <OtherChild onChange={this.otherChildChanged}> 
     </OtherChild> 
     // some code that might trigger onComponentUpdate() 
     </div> 
    ); 
    } 
} 

これを行うより良い方法はありますか？

Answer 1

サイズ変更可能なdivのサイズを子コンポーネントの小道具として渡す必要があります。このように変更すると、JSON.stringify(nextProps) !== JSON.stringify(this.props)はtrueとなり、再レンダリングが行われます。

親が発生したことに応じてコンポーネントが特定の方法（たとえば再レンダリング）で動作する必要がある場合は、そのコンポーネントを支柱として渡す必要があります。