React 怎么实现 Vue 的 组件

若是你用过 Vue，那确定知道它有一个很是好用的组件（keep-alive）可以保持组件的状态来避免重复重渲染。

有时，咱们但愿在列表页面进入详情页面后，缓存列表页面的状态；当从详情页面返回列表页面时，列表页面仍是和切换前同样。

这实际上挺难实现的，由于 React 中的组件一旦卸载就没法重用。在 issue #12039 中提出了两种解决方案；经过样式来控制组件的显示（display：none | block;），可是这可能会致使问题，例如切换组件时，没法使用动画；或者使用像 Mobx 和 Redux 这样的数据流管理工具，但这太麻烦了。

因而我就本身实现了 React 版本的 react-keep-alive，它的效果和 Vue 的 <keep-alive> 相同，但在使用上有些区别。

React Keep Alive 提供了 <Provider>，你必须把 <KeepAlive> 放在 Provider 里面，而且每一个 <KeepAlive> 组件都必须拥有一个惟一的 key。

import React from 'react';
import ReactDOM from 'react-dom';
import {
  Provider,
  KeepAlive,
} from 'react-keep-alive';
import Test from './views/Test';

ReactDOM.render(
  <Provider> <KeepAlive key="Test"> <Test /> </KeepAlive> </Provider>,
  document.getElementById('root'),
);
复制代码

react-keep-alive 是经过 React.createPortal API 实现的。react-keep-alive 有两个主要的组件 <Provider> 和 <KeepAlive>；<Provider> 负责保存组件的缓存，并在处理以前经过 React.createPortal API 将缓存的组件渲染在应用程序的外面。缓存的组件必须放在 <KeepAlive> 中，<KeepAlive> 会把在应用程序外面渲染的组件挂载到真正须要显示的位置。

而且我还新增了两个生命周期 componentDidActivate 和 componentWillUnactivate，新增后的生命周期：

你们有兴趣能够去个人 github 上瞅瞅，另外附上 中文文档。

小伙伴们多提提 Issues 哈。