一、状态提升

定义：当两个组件之间需要共享一个状态（数据）时，我们的做法是把这个状态（变量）定义它们共同的最近的一个父组件中。

二、组合&&继承

组合：它是React官方特别推荐的一种组件化的设计方案。

意义：组合是React封装组件的基础思想，背后的语法基础：props children / render props。

1、封装组件的一般思路（观察--封装--使用）

1、思考当前产品需要复用的一种类型的组件，由哪几个部分组件？（抽象、拆解）

2、把每个“子部分”封装子组件，把每个子组件的多种可能通过props进行控制。

3、把这些子组件，组合成多种不同的结果。（3种header*2种boyd*2种footer=12种结果）

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属性添加默认值

Modal.defaultProps = { title: '呵呵' }

三、上下文

这是React官方提供的一种在组件树之间自上而下地传递数据的方案

作用：在组件树之间进行数据传输。

特点1：上下文向子组件传递数据可以绕过props，每个组件节点都可以直接访问到上下文。

特点2：数据流自根组件向后代组件传递，只能单向的，即“自上而下”。

工作中：我们很少自己封装上下文。大多情况下，都在使用第三方库（都是依托于上下文实现的），比如react-router、mobx、redux、自定义封装国际化组件库。

在React中如何使用“自定义上下文”？

1、使用React.createContext()创建“上下文组件”

const ThemeContext = React.createContext()

const { Provider, Consumer } = ThemeContext

2、在组件树的任何节点上包裹一个 <Provider value={数据} />

Provider 向组件树中“注入”数据（提供者）

Cunsumer 从组件树中“取出”数据（消费者）

3、在后代组件节点上，使用 contextType属性 或者 使用Consumer使用上下文数据。