内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

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

2019-02-03 12:21 出处:清屏网 人气: 评论(0

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 (
       [
         <div key="container">2</div>,
         <div key="more">1</div>,
       ]
     );
    }
  2. 元素的style可以写字符串,转回react是报错,导致页面白屏
    <div style={`background: url(${this.props.h5img});`} />
  3. will这些不安全的生命周期,需要手动修改
  4. 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复杂的


分享给小伙伴们:
本文标签: preactreact

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号