Question

假设我在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包含整个大量后代组件树的情况，但我只想在{{1}上制定一些相对整齐的变化。 }。有没有办法让React只更新父级，而不尝试重新渲染子级？

Answer 1

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

您的代码需要注意一些事项

当您forceUpdate时，您不需要setState。 React会自动为您完成。
你可能意味着：

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

如果子组件的props不变，React是否仍然重新渲染它？

1 个答案: