React基础-进阶
⼀、状态提升
定义：当两个组件之间需要共享⼀个状态（数据）时，我们的做法是把这个状态（变量）定义它们共同的最近的⼀个⽗组件中。定义：
⼆、组合&&继承
组合：它是React官⽅特别推荐的⼀种组件化的设计⽅案。
组合：
意义：组合是React封装组件的基础思想，背后的语法基础：props children / render props。
意义：
1、封装组件的⼀般思路（观察--封装--使⽤）
1、思考当前产品需要复⽤的⼀种类型的组件，由哪⼏个部分组件？（抽象、拆解）
2、把每个“⼦部分”封装⼦组件，把每个⼦组件的多种可能通过props进⾏控制。
3、把这些⼦组件，组合成多种不同的结果。（3种header*2种boyd*2种footer=12种结果）react组件之间通信
2、简单理解继承实现组件的复⽤？
class Modal extends PureComponent {}
class DefaultHeaderModel extends Modal {}
class MiniHeaderModal extends Modal {}
class DefaultFooterDefaultHeaderModal extends DefaultHeaderModel {}
class CustomFooterMiniHeaderModal extends MiniHeaderModal {}
为props添加数据类型验证
npm install prop-type
import PropTypes from 'prop-types'
为props属性添加默认值
title: '呵呵' }
Modal.defaultProps = { title: '呵呵' }
Modal.defaultProps = {
三、上下⽂
这是React官⽅提供的⼀种在组件树之间⾃上⽽下地传递数据的⽅案
作⽤：在组件树之间进⾏数据传输。
作⽤：
特点1：上下⽂向⼦组件传递数据可以绕过props，每个组件节点都可以直接访问到上下⽂。
特点1
特点2：数据流⾃根组件向后代组件传递，只能单向的，即“⾃上⽽下”。
特点2
⼯作中：我们很少⾃⼰封装上下⽂。⼤多情况下，都在使⽤第三⽅库（都是依托于上下⽂实现的），⽐如react-router、mobx、redux、⾃定义⼯作中：
封装国际化组件库。
在R ea c t中如何使⽤“⾃定义上下⽂”？
1、使⽤ateContext()创建“上下⽂组件”
const ThemeContext = ateContext()
const { Provider, Consumer } = ThemeContext
2、在组件树的任何节点上包裹⼀个 <Provider value={数据} />
Provider 向组件树中“注⼊”数据（提供者）
Cunsumer 从组件树中“取出”数据（消费者）
3、在后代组件节点上，使⽤ contextType属性 或者 使⽤Consumer使⽤上下⽂数据。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。