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. 语法上

  1. preact的元素数组可以不写key，切换回来必然警告很多，需要把key补上

    render() {
    return (
    [
    <divkey="container">2</div>,
    <divkey="more">1</div>,
    ]
    );
    }

  2. 元素的style可以写字符串，转回react是报错，导致页面白屏

    <divstyle={`background:url(${this.props.h5img});`} />

  3. will这些不安全的生命周期，需要手动修改

  4. state必须初始化，不能直接想有this.state.xx就有。必须保证后面用到this.state之前，对state有初始化，否则是null

react-router-react-">3. preact相关的router迁移回react生态

首先，import的preact-router得换成react-router。然后，将对应的语法和生态迁移到react相关的。

preact-router:

<Routerhistory={history}>
<Mainpath="/"history={history} />
<GetGiftFormpath="/get_gift_form"history={history} />
<Joinpath="/join"history={history} />
<NewUserpath="/new_user"history={history} />
</Router>

react-router:

<Routerhistory={history}>
<div>
<Routeexactpath="/"history={history}component={Main} />
<Routepath="/get_gift_form"history={history}component={GetGiftForm} />
<Routepath="/join"history={history}component={Join} />
<Routepath="/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的路由更新监听是这样的:

<Routerhistory={history}onChange={this.handleRoute}>
......
</Router>

切换到react的话，没有这个方法。于是我们继续找history，发现有一个listen属性，看名字是一个监听函数，也就是可以实现路由更新监听的：

    history.listen((location) => {
...
});

4. 异步路由

用preact-router的时候，有些组件是异步的：

<Routerhistory={history}>
{ trackRoute() }
</Router>

trackRoute函数组件：

import React from'react';
import AsyncRoute from'preact-async-route';
exportdefault () => {
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' */));
functionTrackRoute() {
return (
<Suspensefallback={<div />}>
<Comp />
</Suspense>
);
}
exportdefault 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屏显示脚。

记一次preact迁移到react16.6.7的经历

这里当然少不了原生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) {
returntrue;
}
returnnull;
}
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复杂的

以上是 preact迁移react16.6.7经历 的全部内容， 来源链接： utcz.com/a/115993.html

回到顶部