Question

我对React很陌生，下面有问题

我有一个这样的父组件：

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {count:1};
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        return false;
    }

    setCount = () => {
        this.setState({
            count: 2
        });
    };

    render() {
        const {name, running, onRun, onStop} = this.props;
        return (
            <div>
                <Test count={this.state.count}/>
                <p><a href="#" onClick={this.setCount}>SetCount</a></p>
            </div>
        );
    }
}

这是测试组件

class Test extends React.Component {
    constructor(props) {
        super(props);
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        return true;
    }
    render() {
        const {count} = this.props;
        return (
            <div>
                {console.log("Counting")}
                <p>{count}</p>
            </div>
        );
    }
}

我有方法“ shouldComponentUpdate”在父组件中返回“ false”，因为我不想重新渲染它。我的理解是React知道需要重新渲染DOM的哪一部分。在这种情况下，父更改的状态将重新呈现“测试”组件

但是当我运行上述代码时，“测试”组件不会重新显示。

我的代码有什么问题吗？

非常感谢您的帮助

Answer 1

您需要通过父母的true方法返回shouldComponentUpdate。

如果返回false，则即使您调用了调用setState的函数，初始渲染后它也不会更新。

Answer 2

您正在谈论整个页面的刷新吗？如果是这样，您可能想将<a>标记更改为button或使用e.preventDefault();。

如果没有，我不确定是否可行。如果在父级中设置setState，它将重新渲染父级以及子级。如果不想渲染父级，则必须在子级中管理各个状态管理。例如，

class Parent extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const {name, running, onRun, onStop} = this.props;
        return (
            <div>
                <Test/>
            </div>
        );
    }
}

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {count:1};
    }
    setCount = (e) => {
        e.preventDefault();
        this.setState({
            count: 2
        });
    };
    render() {
        const {count} = this.state;
        return (
            <div>
                {console.log("Counting")}
                <p>{count}</p>
                <p><a href="#" onClick={this.setCount}>SetCount</a></p>
            </div>
        );
    }
}

父状态更改后，孩子未更新

2 个答案: