父组件重新渲染时如何停止子组件的重新渲染答案

【问题标题】：How to stop rerendering of child component when parent rerenders父组件重新渲染时如何停止子组件的重新渲染
【发布时间】：2017-06-30 06:35:18
【问题描述】：

我是 React 的初学者。我正在做一个有父组件的项目。当我点击一个链接时，它会呈现一个模式。 modal 是另一个组件。

现在，如果我在父组件中进行一些更改并单击链接，所有更改都会被重置。我知道这是因为父组件再次渲染。有没有办法阻止这种情况？

export default class Positions extends DJSComponent {

    static propTypes = {
        positionGridData: PropTypes.array.isRequired
    };
    static defaultProps = {
        positionGridData: []
    };

    state = {
        showModalForAddNew: false,
    };
    
    closeAddNewModal = () => {
        this.setState( {
            showModalForAddNew: false
        });
    };

    openAddNewModal =() => {
        this.setState( {
            showModalForAddNew: true
        });
    };

    render() {
        return (
        
              <div>
                  <Modal 
                    key="modal_addnew" 
                    modalTitle={'Add a New Row'}
                    show={this.state.showModalForAddNew} 
                    onModalClose = {this.closeAddNewModal} >

                     < AddNewModal /> 

                  <Modal>
                  
                  <Button 
                      onClick={this.openAddNewModal}
                  >
                      Add New
                  </Button>

                  <Grid
                      data={this.props.positionGridData}
                      style={{border:'1px solid silver'}}
                  />

            </div>
          );
    }
}

基本上，Grid 组件在父组件中为我呈现一个网格。如果我单击 Add New 按钮，我不希望我的 Grid 再次被渲染。就像如果我根据自己的喜好对网格的列重新排序，然后当我单击添加新按钮时，随着网格再次呈现，一切都消失了。

编辑 1：

My initial grid

现在假设我更改了这样的列。 Edited grid

现在，如果我单击“添加新”按钮，我的 Grid 会回到初始状态，因为它会再次呈现我不想要的状态。

【问题讨论】：

编辑了我的问题。看看

标签： javascript reactjs

【解决方案1】：

在渲染 Grid 组件时，您在此处将样式作为对象传递：

style={{border:'1px solid silver'}}

每当您的位置组件呈现时，它将始终将 JSON 对象的新引用传递给网格组件。如果您将样式作为常量放在文件顶部并在此处设置常量，或者使用 className 定义样式会更好。

例如：

const gridStyle = {border:'1px solid silver'} // at the top of the file or just import this from other file containing styles

像这样在渲染中使用它：

 <Grid
   data={this.props.positionGridData}
   style={gridStyle}
 />

正如我所见，您只是在 openAddNewModal 函数中执行 setState，而不会更改传递给 Grid 组件的 positionGridData。您可以在 Grid 组件中使用 shouldComponentUpdate 函数，并 shallowCompare 将新道具与旧道具进行对比，如下所示：

import shallowEqual from 'shallowequal'

class Grid extends React.Component {
  shouldComponentUpdate(nextProps) {
    !shallowEqual(this.props, nextProps)
  }
  render() {
    ...
  }
}

shallowEqual 将对值进行浅比较。更多详情可以去here

【讨论】：