如果子组件的props不变，React仍会重新渲染它吗？

  • Z时代
  • 2024-01-10
  • 分类：问答

假设我在React中有以下一对父组件和子组件：

var ChildComponent = React.createClass({
    getDefaultProps: function(){
        return {
            a: 'a',
            b: 'b',
            c: 'c'
        }
    },
    render: function() {
        return (
            /* jshint ignore:start */
            <div className={'child' + (this.props.b ? ' modifierClass' : '')} something={this.props.a}>
                {this.props.c}
            </div>
            /* jshint ignore:end */
        );
    }
});
var ParentComponent = React.createClass({
    componentDidMount: function(){
        //After 10 seconds, change a property that DOES NOT affect the child component, and force an update
        setTimeout(function(){
            this.setState({foo: 'quux'});
            this.forceUpdate();
        }.bind(this), 10000);
    }
    getInitialState: function(){
        return {
            foo: 'bar',
            a: 1,
            b: 2,
            c: 3
        }
    },
    render: function() {
        return (
            /* jshint ignore:start */
            <div className="parent">
                <ChildComponent a={this.props.a} b={this.props.b} c={this.props.c}/>
            </div>
            /* jshint ignore:end */
        );
    }
});
React.render(
    /* jshint ignore:start */
    <ParentComponent />, 
    /* jshint ignore:end */
    document.getElementsByTagName('body')[0]
);

当我执行时forceUpdate，由于没有任何传递给ChildComponent更改的道具，React会尝试重新渲染它吗？如果我有1000个这样的孩子怎么办？

我担心的是，我有一个很深ChildComponent的树，其中包含一棵庞大的后代树，但我只想在上进行一些相对修饰性的更改ParentComponent。有什么方法可以让React只更新父对象，而不必尝试重新渲染子对象？

回答：

当React重新渲染时ParentComponent，它将自动重新渲染ChildComponent。要解决的唯一途径是实现shouldComponentUpdate在ChildComponent。你应该比较this.props.a，this.props.b并this.props.c和ChildComponents自己的状态来决定重新渲染与否。如果您使用的是不可变数据，则可以使用严格相等性比较上一个和下一个状态以及道具===。

您的代码需要注意几件事

  1. 您不需要forceUpdate时setState。React自动为您完成。

  2. 您可能的意思是：

<ChildComponent a={this.props.a} b={this.props.b} c={this.props.c}/>

以上是 如果子组件的props不变，React仍会重新渲染它吗？ 的全部内容， 来源链接： utcz.com/qa/428936.html

回到顶部