Question

我有一个名为roles的数组，我循环并创建子组件。当我将项目推送到该数组时，所有子组件都将重新呈现（基于render方法中的console.log）。

我认为反应有智能虚拟dom diffing只有更改的项目更新。那么为什么所有项目都重新渲染，甚至认为当一个额外的项目附加到数组时所有的子道具都保持不变？我在错误地更新阵列时做错了什么？

var Child = React.createClass({
    render: function() {
        console.log('rendering!!')
        return <li>{this.props.role.name}</li>;
    }
});


var Parent = React.createClass({
    getInitialState: function(){
        return {
           roles: [
              {name: 'Admin', i: 0},
              {name: 'Janitor', i: 1},
              {name: 'Teacher', i: 2},
           ]
      }
    },
    addRole: function(){
        var i = this.state.roles.length;
      var newRoles = this.state.roles.slice();
      newRoles.push({name: 'some role', i: i})

        this.setState({
        roles: newRoles
      })
    },
    render: function() {
            var roles = this.state.roles.map(function(role){
            return <Child role={role} key={role.i}/>
        });
        return (
            <ul>
            {roles}
            <button onClick={this.addRole}>Add role</button>
          </ul>);
    }
});

Answer 1

默认情况下，React将始终重新渲染所有内容。有一个名为shouldComponentUpdate的生命周期方法可以启用此行为（它始终返回true）。

让shouldComponentUpdate返回true或false，具体取决于道具更改的内容，您可以更改此内容，并告诉React不要一直重新渲染所有内容。

var Child = React.createClass({
    shouldComponentUpdate: function(nextProps) {
        if (this.props.role.name === nextProps.role.name) { 
            return false; 
        }
        return true;
    },
    render: function() {
        console.log('rendering!!')
        return <li>{this.props.role.name}</li>;
    }
});

推送到道具阵列时，所有子组件都会重新渲染

1 个答案: