Question

我有一个react类，我需要使用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的大小作为prop组件传递给子组件。这样，当它发生变化时，JSON.stringify(nextProps) !== JSON.stringify(this.props)将为true，并且会重新渲染。

如果某个组件必须以某种方式运行（例如，重新渲染），具体取决于其父级上发生的事情，则应将其作为道具传递给它。

重新渲染React组件

1 个答案: