Question

我读过这篇文章：https://codeburst.io/how-to-use-react-lifecycle-methods-ddc79699b34e

它清楚地说：“如果组件的道具或状态因任何原因而改变，则会执行组件的更新。但是，这意味着必须重新渲染组件，这会导致以下方法：被称为：... shouldComponentUpdate（）....“

现在，我写了这个组件：

export default class MyComp extends React.Component {
    constructor(props) {
      super(props);
    }

    click() {
        this.props = {name: "John"};
    }

    shouldComponentUpdate() {
        console.log("change in props");
    }
    render() {
        return <div>
            <h1> {this.props.myText} </h1>
            <button onClick={this.click.bind(this)}> click me </button>
        </div>;
    }
}

我希望一旦我点击按钮，我会在控制台中收到一条消息：“改变道具”。

但是，它没有发生。你知道为什么吗？

Answer 1

经过一个小小的研究，我发现'道具'对象不应该由组件本身改变。更改它的唯一方法是重新渲染创建包含道具的子组件的父组件。

例如，

class App extends Component {
    constructor() {
        super();
        this.state = {
            value: "Hiush!"
        };
    }

    click() {
        this.setState((prevState) => {
            return {value: 'Biush!'}
        })
    }

    render() {
        return (
            <div>
                <MyComp value={this.state.value}/>
                <button onClick={this.click.bind(this)}> Click Me!! </button>
            </div>
        );
    }
}


export class MyComp extends Component {
    constructor(props) {
        super(props);
    }
    shouldComponentUpdate() {
        console.log("change in props");
        return true;
    }
    render() {
        return <h1> {this.props.value} </h1>
    }
}

App是MyComp的父组件。当调用App中的click方法时，App的状态对象被更改。因此，调用App中的'render'方法，并从'render'返回MyComp。更改'this.state.value'的内容，然后更改MyComp的props对象。

React：当props对象发生变化时，生命周期方法会发生什么？

1 个答案: