响应属性对象更改

Question

我正在寻找一种在React.Component的一个属性(对象(的内部状态发生变化时更新它的方法。

示例：

export class ParentClass extends React.Component {
constructor(props) {
super(props);
this.someObject = new SomeObject();
}
...
render() {
return <ChildClass someObject=this.someObject />
}
}

当我调用父类中的this.someObject.change()时。由于someObject的内部状态刚刚更改，我如何向子类发出信号，表示它应该重新呈现？

通常，如果我更新了一个基元值，我相信这会触发子对象的重新渲染。但是，由于对象指针没有更改，我认为子类没有意识到发生了更改。

在这种情况下，是否可以触发ChildClass的重新渲染？有没有更好的惯例来管理这种关系？

Answer 1

这可能会对性能产生影响，但我通过将someObject移动到父级的状态并将Child属性设置为{this.state.someObject}来解决此问题。

当someObject(在本例中为roadTileMatrix(发生更改时，我克隆该对象，进行更改，然后将新对象设置为状态。从我的阅读来看，这似乎是一种常见的模式。

或者，作为一个更轻量级的解决方案，您可以在每次对someObject进行更改时都会更改的状态中设置key值，从而触发子对象的重新呈现。

此处编码：

import React from 'react'
import PropTypes from 'prop-types';
import { RoadTileMatrix, Grid } from './Grid';
import { TravelGraph } from './TravelGraph';
export class RoadNetwork extends React.Component {
constructor(props) {
super(props);
const rows = this.props.rows;
const cols = this.props.cols;
this.state = {
roadTileMatrix: new RoadTileMatrix(rows, cols, null)
};
this.addTile = this.addTile.bind(this);
}
addTile(r, c) {
const rows = this.props.rows;
const cols = this.props.cols;
const oldArray = this.state.roadTileMatrix.innerArray;
const newRoadTileMatrix = new RoadTileMatrix(rows, cols, oldArray);
newRoadTileMatrix.addTile(r, c, true);
this.setState({
roadTileMatrix: newRoadTileMatrix,
});
}
render() {
return (
<div>
<Grid roadTileMatrix={this.state.roadTileMatrix} addTile={this.addTile} />
<TravelGraph />
</div>
);
};
}
RoadNetwork.propTypes = {
rows: PropTypes.number.isRequired,
cols: PropTypes.number.isRequired,
}