父子组件通信的核心思想

父子组件通信

父组件基于属性把信息传递给子组件 ! !

子组件想改父组件的数据时，父组件把修改自己数据的方法，基于属性传递给子组件，子组件执行方法即可!

父组件想把一些HTML结构传递给子组件，基于属性中的children「插槽」!!

父组件在调用子组件的时候，可以给子组件设置ref，以此获取子组件的实例(或者子组件中暴露的数据和方法) ....

类组件

Vote.jsx

VoteMain.jsx

VoteFooter.jsx

父子组件通信

就是以父组件为主导，基于属性实现通信
- 原因:只有父组件可以调用子组件，此时才可以基于属性，把信息传递给子组件
  - 父组件基于属性，可以把信息传递给子组件「父>子」
  - 父组件基于属性「插槽」，可以把HTML结构传递给子组件「父>子」
  - 父组件把方法基于属性传递给子组件，子组件把传递的方法执行「子>父」
父组件基于ref获取子组件实例「或者子组件基于uselmperatveHandle暴露的数据和方法」

组件渲染的顺序:依赖于深度优先原则

父组件第-次渲染:
- 父 willMount -> 父 render $子 willount$ -> 子 render -> 子 didMount -> 父 didMount
父组件更新:
- 父 shouldUpdate -> 父 willUpdate -> 父 render $子willReciveProps -\> 子 shouldUpdate -\> 子 willUpdate -\> 子 render -\> 子didUpdate$ -> 父 didUpdate
- 特殊:我们完全可以在子组件内部做优化处理，验证传递的属性值有没有变化，如果没有变化，则禁止更新
父组件释放:
- 父 willUmount -> 父释放中 $子willUnMount -\> 子释放$ -> 父释放