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

回到顶部