javascript - 关于 ReactJS 中的 LifeCycles/代码片段中的问题

Question

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

App.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。此方法用于阻止 Component 渲染。这样做的原因是每次父 Component 渲染时，它都会使其所有子组件渲染。如果 child 收到的 Prop 改变了，这是可以的，但当那些收到的 Prop 没有改变时，就没有必要了。 children 基本上没有任何变化，但它仍在渲染。如果这假设存在性能问题，您可以使用 PureComponent 而不是 Component，或者在 shouldComponentUpdate 中使用您自己的逻辑。

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

如果有什么不清楚或者我遗漏了什么，请告诉我。