重新渲染React组件

Question

I have a react class in which I need to use shouldComponentUpdate() , to prevent an infinite loop between the component and its parent.

I simply check whether a deep clone of nextProps is equal to this.props , and I only update the component if they're not.

So far, so good. (?)

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

Now, in my parent component, something happens that makes me want to re-render the child, without specific props changing. What I did now, is changing a counter in state and passing it to the child as a prop. I never do anything with the counter itself, it is merely an indication for the child that props actually changed so that the child should update.

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

Is there a better way to do this?

Answer 1

You should pass down the size of your resizable div as a prop to the Child Component. This way, when it changes, JSON.stringify(nextProps) !== JSON.stringify(this.props) will be true and a re-render will occur.

If a component has to behave in a certain way (re-render, for example) depending on something that happens on his Parent, it should be passed to it as a prop.