父子组件通信的核心思想

父子组件通信

• 父组件基于属性把信息传递给子组件 ! !
• 子组件想改父组件的数据时，父组件把修改自己数据的方法，基于属性传递给子组件，子组件执行方法即可!
• 父组件想把一些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 -> 子释放] -> 父释放

函数组件

Vote.jsx

VoteMain.jsx

VoteFooter.jsx

跨组件通信

基于上下文方案实现

基于上下文对象中，提供的Provider组件，用来:

• 向上下文中存储信息: value 属性指定的值就是要存储的信息
• 当祖先组件更新，render 重新执行，会把最新的状态值，再次存储到上下文对象中! !

类组件

ThemeContext.js

Vote.jsx

VoteMain.jsx

VoteFooter.jsx

函数组件

ThemeContext.js

Vote.jsx

VoteMain.jsx

VoteFooter.jsx