Question

我使用 react-card-flip 来创建一个应用程序。儿童组件从父母那里获取道具。当特定的一个翻转时如何防止道具改变（重新渲染）？结构是这样的：这是卡片的正面。点击翻转

    <YOUR_BACK_COMPONENT>
      This is the back of the card.
      <button onClick={this.handleClick}>Click to flip</button>
    </YOUR_BACK_COMPONENT>
  </ReactCardFlip>

Answer 1

为了防止重新渲染，您可以使用 $ valgrind ./bin/example_arr_last ==15454== Memcheck, a memory error detector ==15454== Copyright (C) 2002-2017, and GNU GPL'd, by Julian Seward et al. ==15454== Using Valgrind-3.13.0 and LibVEX; rerun with -h for copyright info ==15454== Command: ./bin/example_arr_last ==15454== 0, 0, 0, 0 11, 22, 33, 0 0, 0, 0, 0 ==15454== ==15454== HEAP SUMMARY: ==15454== in use at exit: 0 bytes in 0 blocks ==15454== total heap usage: 6 allocs, 6 frees, 1,108 bytes allocated ==15454== ==15454== All heap blocks were freed -- no leaks are possible ==15454== ==15454== For counts of detected and suppressed errors, rerun with: -v ==15454== ERROR SUMMARY: 0 errors from 0 contexts (suppressed: 0 from 0)

React.memo()

https://reactjs.org/docs/react-api.html#reactmemo

Answer 2

您可以使用 React.PureComponent 或 React.memo()。

第一件事：React.memo() 与 PureComponent 的作用相同，但它不检查 state 中的更改，仅检查 props 中的更改。

在此处查找更多信息： https://medium.com/takeaway-tech/a-deep-dive-into-pure-component-and-react-memo-and-why-do-we-need-them-ae99dce6a33c

停止一个子组件重新渲染

2 个答案: