本页目录
我可以使用 React Hooks / Redux / Dva / 其他 React 特性 吗？我可以使用 Ant Design / Ant Design Mobile / 其他 React DOM 依赖类库吗？既然 web 的现成方案不能直接使用，我应该怎么快速开发 UI 组件？使用高阶组件导致页面的生命周期未调用编译后小程序提示找不到 xxx 文件路径与 Taro 的区别？

FAQ

我可以使用 React Hooks / Redux / Dva / 其他 React 特性 吗？

可以。

我可以使用 Ant Design / Ant Design Mobile / 其他 React DOM 依赖类库吗？

不可以。

小程序中没有 DOM，无法使用基于 React DOM 的 UI 库。

既然 web 的现成方案不能直接使用，我应该怎么快速开发 UI 组件？

ray 支持直接使用原生组件库。具体请参考 混合开发。

使用高阶组件导致页面的生命周期未调用

如果使用了 Redux 的 connect ，请将 connect 的 option.forwardRef 设置为 true文档。其它第三方库的高阶组件的处理方式也类似。原因如下。

对于使用 class 组件的页面，Ray 会通过 ref 获取页面生命周期。当页面组件被高阶组件（有时被称为 HOC）包裹时，通过 ref 取得的是 HOC 最外层的容器组件，而不是被包裹的组件 。我们需要 React.forwardRef 将 ref 转发到内部组件。

import React, { forwardRef } from 'react';
import { View } from '@ray-js/ray';
class IndexPage extends React.Component {
  onReady() {
    console.log('onReady被调用');
  }
  render() {
    return <View>这是一个例子</View>;
  }
}
// HOC 的容器是一个函数式组件
const HOC = (Component) => {
  const Wrapped = (props, ref) => {
    // 一些高阶组件的逻辑
    return <Component {...props} ref={ref} />;
  };
  return forwardRef(Wrapped);
};
// 另一种情况，HOC 容器是一个 class component
const ClazzHOC = (Component) => {
  class Wrapped extends React.Component {
    // 另一些高阶组件的逻辑
    render() {
      const { forwardRef, ...rest } = this.props;
      return <Component {...rest} ref={forwardRef} />;
    }
  }
  // 比起第一种情况，这里的处理要稍微麻烦一些
  return forwardRef((props, ref) => <Wrapped {...props} forwardRef={ref} />);
};
// 下面这三种方式导出的页面都是可以按照预期调用 `onReady`
export default ClazzHOC(IndexPage);
// export default HOC(IndexPage);
// export default IndexPage;

编译后小程序提示找不到 xxx 文件路径

尝试删除打包目录，重新 build

与 Taro 的区别？

Taro 3.0 版本的实现原理与 Ray 大同小异，没有太大的区别。主要区别在于以下两个方面：

  • 跨平台设计，我们深知要打造一个面面俱到的多平台框架会有非常多的坑，与其挖一个大坑填不上，我们选择把有限的精力放在框架的核心功能上，并提供跨平台同构机制以及一个精简的跨平台实现（@ray-js/components），让开发者可以根据自己的业务需求去做跨平台实现。
  • 专注 React，因为 React 是我们自己大量使用和熟悉的前端框架，Ray 会持续专注在 React 技术栈。