关于 ReactJS 中的生命周期/代码片段中的问题

Question

我正在尝试学习ReactJS，并了解了这些生命周期。但是，我对组件DidUpdate((的功能有疑问，我想知道它背后的原因。请查看下面的代码。它是计算三角形面积的简单代码。只是为了理解我们如何将数据从父组件发送到子组件，反之亦然，我正在初始化父组件中的变量，然后将它们传递给子组件以计算面积，然后将结果传回以将状态更改为渲染结果的最终状态。

应用.js

class App extends React.Component{
constructor(props){
super(props);
console.log("In the parent's constructor");
let initializeState=[{'base' : 0,'height' : 0,'area' : 0}];
this.state={ values : initializeState }
console.log(this.state.values);
}
componentDidMount(){
console.log("Mounting values");
let b = [{}];
b['base']=10;
b['height']=20;
b['area']=0;
this.setState({values: b});
}
update = (base,height,area) => {
console.log("Updating state with calculated area");
let updatedValue = [{}];
updatedValue['base'] = base;
updatedValue['height'] = height;
updatedValue['area'] = area;
this.setState({values: updatedValue});
}
render(){
console.log('Inside Parent render');
return(<React.Fragment>
<Triangle val = {this.state.values} update={this.update} />
</React.Fragment>
)
}
}
class Triangle extends React.Component{
shouldComponentUpdate(newProps, newState){
console.log('validating data');
if(newProps.val.base >0 && newProps.val.height >0){
return true;
}else{
return false;
}
}
componentDidUpdate(prevProps, prevState, snapshot){
console.log('In the child componentDidUpdate');
console.log('If you've reached this, state has been re-rendered')
console.log(prevProps.val.base);
console.log(prevProps.val.height);
console.log(prevProps.val.area);
}
calcArea = () => {
console.log('Calculating area now');
let area = 1/2* this.props.val.base * this.props.val.height;
this.props.update(this.props.val.base,this.props.val.height,area);
}
render(){
console.log("In the child's render method")
return(
<React.Fragment>
<h2>Base : {this.props.val.base}</h2>
<h2>Height : {this.props.val.height}</h2>
<h2>Area : {this.props.val.area} </h2>
<button onClick={this.calcArea}>Click to calculate AREA</button>
</React.Fragment>
)
}
}
export default App;

所以一切正常，即这是一系列输出：

In the parent's constructor
App.js:11 [{…}]
App.js:33 Inside Parent render
App.js:66 In the child's render method
App.js:15 Mounting values
App.js:33 Inside Parent render
App.js:43 validating data
App.js:66 In the child's render method
App.js:52 In the child componentDidUpdate
App.js:53 If you've reached this, state has been re-rendered

到目前为止，组件已根据 componentDidMount 函数中提到的新值重新渲染。但是，下一个输出是：

App.js:54 undefined
App.js:55 undefined
App.js:56 undefined

它应该是被销毁的值，即 0， 0， 0(在父级的构造函数中使用 this.state 提到(。虽然当我点击计算面积并重新渲染组件时，它显示了已被破坏的正确值。即，

Calculating area now
App.js:24 Updating state with calculated area
App.js:33 Inside Parent render
App.js:43 validating data
App.js:66 In the child's render method
App.js:52 In the child componentDidUpdate
App.js:53 If you've reached this, state has been re-rendered
App.js:54 10
App.js:55 20
App.js:56 0

有人可以告诉我为什么第一次更改状态而不是我们实例化的值时结果是"未定义的"？

Answer 1

JavaScript 中存在一些问题，这些问题可能是您获得未定义值的原因。

let initializeState=[{'base' : 0,'height' : 0,'area' : 0}];
this.state={ values : initializeState }

在这里，您将状态设置为具有键values的对象，然后该键[{}]保存对象数组。

这会导致在定义了对象数组但随后像对象一样访问的其他地方出现问题：

let b = [{}];
b['base']=10;

此代码应为：

let b = {};
b.base = 10;

当您使用"普通"字符串作为键时，无需使用括号表示法。当对以数字开头、具有连字符等的键或字符串键使用变量时，使用此表示法：

const a_string = 'base';
const a_string_with_hyphen = 'some-key-name';
an_object[a_string] = 123;
an_object[a_string_with_hyphen] = 456;

定义值将更改的变量时，请使用let，否则使用const：

let value_that_will_change = 123;
const value_that_wont_change = 456;
value_that_will_change = 789;

---

具体来说，关于 react ，我对代码进行了一些更改以显示不同的方法，以便您可以看到状态是如何变化的。我使用输入来修改值，我认为在这种情况下会很方便：

export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { base: 0, height: 0, area: 0 };
console.log("App. constructor.", "state:", this.state);
}
componentDidMount() {
const values = {
base: 10,
height: 20,
area: 200
};
this.setState(values);
console.log(
"App. componentDidMount.",
"state:",
this.state,
"Updating state with new values:",
values
);
}
componentDidUpdate(prevProps, prevState) {
console.log(
"App. componentDidUpdate.",
"prev state:",
prevState,
"new state:",
this.state
);
}
updateBase = base_new => {
this.setState({
base: base_new,
area: (1 / 2) * base_new * this.state.height
});
console.log("App. updateBase.", "new base:", base_new);
};
updateHeight = event => {
const height_new = parseInt(event.target.value);
this.setState({
height: height_new,
area: (1 / 2) * height_new * this.state.base
});
console.log("App. updateHeight.", "new height:", height_new);
};
doubleBase = () => {
const { base, height } = this.state;
const base_new = 2 * base;
const area_new = (1 / 2) * base_new * height;
this.setState({ base: base_new, area: area_new });
console.log("App. doubleBase.", "new area:", area_new);
};
render() {
const { state, updateBase, updateHeight, doubleBase } = this;
console.log("App. render.", "state:", this.state);
return (
<Triangle
{...state}
updateBase={updateBase}
updateHeight={updateHeight}
doubleBase={doubleBase}
/>
);
}
}
class Triangle extends React.Component {
componentDidMount() {
const {
updateBase,
updateHeight,
doubleBase,
...parent_state_props
} = this.props;
console.log("Triangle. componentDidMount.", "props:", parent_state_props);
}
componentDidUpdate(prevProps) {
const {
updateBase,
updateHeight,
doubleBase,
...parent_state_props
} = this.props;
const {
updateBase: updateBase_prev,
updateHeight: updateHeight_prev,
doubleBase: doubleBase_prev,
...parent_state_props_prev
} = prevProps;
console.log(
"Triangle. componentDidUpdate.",
"prev props:",
parent_state_props_prev,
"new props:",
parent_state_props
);
}
render() {
const {
updateBase,
updateHeight,
doubleBase,
...parent_state_props
} = this.props;
const { base, height, area } = parent_state_props;
console.log("Triangle. render.", "props:", parent_state_props);
return (
<React.Fragment>
<label for="base" style={{ display: "block" }}>
Base
</label>
<input
id="base"
type="number"
value={base}
// Here we are defining the function directly and sending the value.
onChange={event => updateBase(parseInt(event.target.value))}
/>
<label for="height" style={{ display: "block" }}>
Height
</label>
<input
id="height"
type="number"
value={height}
// Here we are sending the event to the function.
onChange={updateHeight}
/>
<h2>{`Area: ${area}`}</h2>
<button onClick={doubleBase}>Double base</button>
</React.Fragment>
);
}
}

在上面的代码中，我省略了shouldComponentUpdate。此方法用于防止组件呈现。这样做的原因是，每次父组件渲染时，它都会使其所有子组件渲染。如果孩子们收到的道具发生了变化，这没关系，但当收到的道具没有改变时，就没有必要了。孩子们基本上没有任何变化，但它仍在渲染。如果这假设存在性能问题，您可以使用PureComponent而不是Component，或者在shouldComponentUpdate中使用您自己的逻辑。

最后一件事，如果你接受这个建议，我鼓励你学习今年推出的 React Hooks，这是使用 React 构建的新方法。

如果有什么不清楚的地方或我错过了什么，请告诉我。

Answer 2

在应用程序组件中的组件DidMount上，我们正在设置新值， 以前它们是未定义的。

现在，在三角形组件的componentDidUpdate中，您正在记录从未存在的prevProps，因此它们是未定义的。

componentDidUpdate(prevProps, prevState, snapshot){
console.log('In the child componentDidUpdate');
console.log('If you've reached this, state has been re-rendered')
console.log(prevProps.val.base);
console.log(prevProps.val.height);
console.log(prevProps.val.area);
console.log(this.props.val.base);
console.log(this.props.val.height);
console.log(this.props.val.area);
}

如上更改，您将知道新道具已设置。