React: 删除一个子代，而不需要再次渲染父代

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

看起来你在删除后会重新取回你的列表.所以不如直接手动删除它而不是重新取回整个列表。

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

        let newList = this.state.literatureEntries.filter(item => item.id !== id);
        this.setState({ literatureEntries: newList )}
      })
      .catch(error => {
        console.log(error)
      })
  }

Answer 2

父组件控制着哪些子组件被显示，所以，当你删除一个子组件时，它的状态会发生变化，然后它需要重新渲染整个东西。

优化这个问题的想法是通过以下方式来记忆子组件 React.memo.React memo有第二个参数，是一个测试组件是否需要根据道具重新渲染的函数。

从docs中获得。

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个孩子，用户会看到所有的孩子吗？ 可能你需要设置一个分页，这样就只显示1020个孩子。