javascript - 当父组件重新渲染时如何停止子组件的重新渲染

Question

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

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

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>
          );
    }
}

基本上，网格组件正在父组件中为我渲染网格。如果我单击添加新按钮，我不希望再次渲染我的网格。就像如果我根据我的偏好重新排序网格的列，然后当我单击“添加新”按钮时，随着网格再次渲染，所有内容都会消失。

编辑1:

My initial grid

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

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

Answer 1

在渲染网格组件时，您将样式作为对象传递到这里:

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，并且没有更改传递给网格组件的positionGridData。您可以在网格组件中使用 shouldComponentUpdate 函数，并将新 props 与旧 props shallowCompare 进行比较，如下所示:

import shallowEqual from 'shallowequal'

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

shallowEqual 将对值进行浅层比较。了解更多详情，您可以前往here