记一次preact迁移到react16.6.7的经历
记一次preact迁移到react16.6.7的经历
0. 前言
preact作为备胎，但是具有体积小，diff算法优化过的特点，简单活动页用上它是不错的选择。但是考虑到react令人兴奋的新特性，preact并没有按时更新去完全支持它，更严重的是一些babel插件、一些库配合preact会有问题。所以，还是不得不迁移了。
如何迁移？package.json直接修改版本，删掉preact，重装，完事！
too young
1. 从alias改起
首先，一般是这样子接入preact的，使得我们代码里面毫无感觉我们用的是preact。在webpack的alias里面配置：
alias: {
react: 'preact-compat',
'react-dom': 'preact-compat'
},
复制代码所以，第一步先把这个去掉
2. 语法上
- preact的元素数组可以不写key，切换回来必然警告很多，需要把key补上
render() {
return (
[
<div key="container">2</div>,
<div key="more">1</div>,
]
);
}
复制代码- 元素的style可以写字符串，转回react是报错，导致页面白屏
<div style={`background: url(${this.props.h5img});`} />
复制代码- will这些不安全的生命周期，需要手动修改
- state必须初始化，不能直接想有this.state.xx就有。必须保证后面用到this.state之前，对state有初始化，否则是null
3. preact相关的router迁移回react生态
首先，import的preact-router得换成react-router。然后，将对应的语法和生态迁移到react相关的。
preact-router:
<Router history={history}>
<Main path="/" history={history} />
<GetGiftForm path="/get_gift_form" history={history} />
<Join path="/join" history={history} />
<NewUser path="/new_user" history={history} />
</Router>
复制代码react-router:
<Router history={history}>
<div>
<Route exact path="/" history={history} component={Main} />
<Route path="/get_gift_form" history={history} component={GetGiftForm} />
<Route path="/join" history={history} component={Join} />
<Route path="/new_user" history={history} component={NewUser} />
</div>
</Router>
复制代码preact-router有一个route方法，就是直接将路由push或者replace的，而react-router是没有这个方法的。实际上底层就是封装history路由加上内部的setstate：
import { route } from 'preact-router';
route('/a');
复制代码问题来了，如果没有这个方法，想用脚本跳转路由怎么办？直接history上改，只能改地址栏的url显示但不能更新组件以及内部状态。所以我们只能找和react-router配合起来用的相关的库。
观察一下，都用到了history属性，传入一个history，这个是用了一个history的库创建的，所以我们尽可能的让它接入两种路由得到一样的效果：
import createHashHistory from 'history/createHashHistory';
const history = createHashHistory();
复制代码打印了history，发现它有push、replace属性，大概也猜到应该就是像route的效果的，一验证发现可行：
history.push('/a');
复制代码另外，还有preact-router的路由更新监听是这样的:
<Router history={history} onChange={this.handleRoute}>
......
</Router>
复制代码切换到react的话，没有这个方法。于是我们继续找history，发现有一个listen属性，看名字是一个监听函数，也就是可以实现路由更新监听的：
history.listen((location) => {
...
});
复制代码4. 异步路由
用preact-router的时候，有些组件是异步的：
<Router history={history}>
{ trackRoute() }
</Router>
复制代码trackRoute函数组件：
import React from 'react';
import AsyncRoute from 'preact-async-route';
export default () => {
return (
<AsyncRoute
path="/track"
getComponent={async () => {
return import('./comp' /* webpackChunkName: 'async_track' */);
}}
/>
);
};
复制代码效果就是，动态import，代码分割。react也有一个类似的，react-async-router，但是用法和我们的之前的preact-async-route差得远而且不能优雅接入。既然是16.6.7了，我们可以试一下新特性：lazy+suspence
import React, { lazy, Suspense } from 'react';
const Comp = lazy(() => import('./comp' /* webpackChunkName: 'async_track' */));
function TrackRoute() {
return (
<Suspense fallback={<div />}>
<Comp />
</Suspense>
);
}
export default TrackRoute;
复制代码5. 内部实现原理不一样的兼容
有一个页面是这样的：
// Main.jsx
render() {
return (
<div>
<Page1 />
<Page2 />
<Page3 />
...
</div>
);
}
复制代码除了page1是原来就在的，其他每一个Pagex组件，返回Page组件，在Page内部，当页码是当前页返回对应的元素，否则返回空：
// Pagex
render() {
return (
<Page />
);
}
// Page
render() {
return currentPage === page ? <somedom> : null
}
复制代码这里，我们可以猜一下，Main是最大的组件，内部状态页码在切换，所有的Pagex组件跟着更新，做出对应的变化。Pagex的更新，走的是didupdate。
实际上，preact的是第一个内部是Page实现的Pagex组件会unmount然后重新didmount。这里是Page2先卸载再挂载，交换位置page1直接到page3的话也是page3先卸载再挂载。一些动画操作就放在了didmount，之前都是这样做的，但大家没有发现是什么问题，因为看见是这样，开发起来没毛病，又没有bug，就不太在意。切换回react，发现动画不生效，才发现因为内部渲染机制不一样导致的。所以我们把函数的调用放在didupdate里面，并且加上执行过一次的标记判断。
6. 减少无必要的函数执行
getSnapshotBeforeUpdate
做一个像qq聊天起跑那样的东西，头和脚固定，中间无限长。这里要求视觉给3个图，头、脚、中间1px高的图。如果内容不满屏，不显示脚不能滚动，如果大于1屏显示脚。
这里当然少不了原生dom操作了，需要判断高度，有没有大于1屏，要不要overflow：hidden：
componentDidUpdate() {
if (this.state.hasFooter) {
return;
}
const last = document.querySelector('.act-card:last-of-type');
if (last) {
const { top } = last.getBoundingClientRect();
if (SCREEN_HEIGHT - top < MAX_BOTTOM_DISTANCE) {
setTimeout(() => {
this.setState({ hasFooter: true }); // eslint：不能在didupdate里面setstate
});
document.body.style.overflow = 'auto';
} else {
document.body.style.overflow = 'hidden';
}
}
}
复制代码这里需要执行两次下面一大块逻辑，第二次是无必要的，我们可以利用getSnapshotBeforeUpdate生命周期配合didupdate使用：
getSnapshotBeforeUpdate(_, prevstate) {
if (!prevstate.hasFooter && prevstate.actCards.length) {
return true;
}
return null;
}
componentDidUpdate(_, __, snapshot) {
if (!snapshot) {
return;
}
......
}
复制代码memo
可以说函数式组件的purecomponent，而且第二个参数能传入第二个类似shouldComponentUpdate的函数进行比较。既然能自定义化，那么对比于purecomponent的自带对象浅比较就是更加的灵活了，比如：
import React, { memo } from 'react';
export default memo((props) => {
const isNoAct = !props.actCards.length || props.loading;
return (
<section className="body-container">
<div>
{
!isNoAct ? props.actCards.map((actCard, index) => (
<div
key={index}
>
......
</div>
))
: (
<div className="no">
暂无
</div>
)
}
</div>
{props.hasFooter && <div className="body-footer" src={footer} alt="err" />}
</section>
);
}, (prevprops, nextprops) => {
// 少渲染一次，一开始actcards什么都没有，我们不比较actcards数组
if (prevprops.hasFooter !== nextprops.hasFooter
|| prevprops.loading !== nextprops.loading) {
return false;
}
return true;
});
复制代码这里我们就少了一次从actcards数组的undefined到[]的过程的比较，而这时候一直是loading状态，没有更新的意义。如果这里return之前又是有像前面那个聊天气泡那种效果需要dom操作的，那就伤性能了。这里我列举出来的只是把代码删减过的简单结果，实际上开发的时候逻辑是远远比这demo复杂的