0
点赞
收藏
分享

微信扫一扫

React - 17 复合组件通信

React - 17 复合组件通信_react

React - 17 复合组件通信_react_02

Vote案例:

父子组件通信(类组件)

React - 17 复合组件通信_react_03

父组件

React - 17 复合组件通信_react_04

子组件

React - 17 复合组件通信_react_05

子组件

React - 17 复合组件通信_react_06

React - 17 复合组件通信_react_07

React - 17 复合组件通信_react_08

父子组件通信(函数组件)

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

React - 17 复合组件通信_react_09

设置依赖

React - 17 复合组件通信_react_10

React - 17 复合组件通信_react_11

子组件VoteFooter

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

React - 17 复合组件通信_react_12

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

React - 17 复合组件通信_react_13

类组件(祖先与后代通信)

第一步:创建上下文对象

React - 17 复合组件通信_react_14

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

React - 17 复合组件通信_react_15

React - 17 复合组件通信_react_16

第三步:在后代组件中,获取上下文中的信息

VoteMain组件获取属性

方案一给类组件设置静态私有属性contextType

React - 17 复合组件通信_react_17

VoteFooter组件获取属性

方案二用ThemeContext.Consumer

React - 17 复合组件通信_react_18

React - 17 复合组件通信_react_19

React - 17 复合组件通信_react_20

函数组件(祖先与后代通信)

祖先组件往上下文中存放信息(和类组件没区别)

React - 17 复合组件通信_react_21

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

React - 17 复合组件通信_react_22

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

React - 17 复合组件通信_react_23

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

React - 17 复合组件通信_react_24

React - 17 复合组件通信_react_25



举报

相关推荐

0 条评论