

Vote案例:
父子组件通信(类组件)

父组件

子组件

子组件



父子组件通信(函数组件)
useCallback不能烂用,这里不设置依赖,子组件中点击支持反对只有第一次生效

设置依赖


子组件VoteFooter
memo方法,作用于函数,会对属性做浅比较,如果没变化则不重新渲染,下面props中的change如果不变,当父组件更新时,子组件不会再更新

祖先组件与后代组件通信 --> 上下文方案

类组件(祖先与后代通信)
第一步:创建上下文对象

第二步:让祖先组件Vote,具备状态和修改状态的方法,同时还需要把这些信息存储到上下文


第三步:在后代组件中,获取上下文中的信息
VoteMain组件获取属性
方案一给类组件设置静态私有属性contextType

VoteFooter组件获取属性
方案二用ThemeContext.Consumer



函数组件(祖先与后代通信)
祖先组件往上下文中存放信息(和类组件没区别)

后代组件获取信息(方案一:ThemeContext.Consumer依然可以用)

方案二用hook函数useContext(更推荐)

后代组件VoteFooter获取上下文信息


