Question

我有一个parent component，其中显示了children的列表。孩子是文学Cards，每个card都有delete button。当我单击删除按钮时，整个父级和子级将再次呈现，因此整个页面将得到刷新。所以如果我是在文献卡列表的底部（例如900张文献卡）并删除最后一张文献卡，页面会刷新，因此我在页面的开头而不是页面的末尾（或者我在任何地方）之前）。这有点烦人，因为删除孩子后我必须向下滚动整个页面。

这基本上是我的父代码：

class ProjectLiterature extends Component {
  constructor(props) {
    super(props);

    this.state = {
      literatureEntries: [],
}}
getLiteratureEntries(){
axios.get(`http://127.0.0.1:5000/getLiterature`)
    .then(res => {

      const literatureEntries = res.data;
      this.setState({ literatureEntries })

    })
    }

deleteLiteratureEntry(id) {
    axios.delete("http://127.0.0.1:5000/deleteLiterature", {
      params: {
        id
      }
    })
      .then(res => {

        // get current literature entries after deleting one file
        this.getLiteratureEntries();
      })
      .catch(error => {
        console.log(error)
      })
  }

render() {
    const literatureEntries = this.state.literatureEntries
    return (
       {  literatureEntries.map((literature, index) => 
             return (
             <Literature literature={literature} key={literature._id}
             deleteLiteratureEntry={this.deleteLiteratureEntry.bind(this)} 
             project_name={this.state.projectName}/>
            )
          })
   }
)}

这基本上是我的子组件：

export default class Literature extends Component {

    render() {
        const literature = this.props.literature
        return (
              <Card>
              <CardHeader>             
                   {literature.title}
                  <Button className="float-right" onClick={() => 
                       this.props.deleteLiteratureEntry(literature._id}
                   </Button>                       
              </CardHeader>    
              <CardBody>
                 ...
              </CardBody>
              </Card>
)}}

那么我有什么可能做的，也许不是整个列表都重新呈现了吗？

Answer 1

父级控制显示哪些子级，因此，当您删除一个子级时，其状态会发生变化，然后需要重新渲染整个子级。

对此进行优化的想法是通过React.memo记住子组件。 React memo具有第二个参数，该参数用于测试组件是否需要根据道具重新渲染。

来自文档：

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

因此，当您删除一个孩子时，将通知父母并重新提供其孩子，除非您告知他们，否则不会重新渲染。

PS：不建议一次显示900个孩子，用户会看到所有孩子吗？可能是您需要设置分页以便只显示10/20个孩子。

反应：删除一个孩子而不再次渲染父母

1 个答案: