#FAQ

#Can I use React features like Hooks, Redux, and Dva?

Yes, you can.

#Can I use React DOM libraries like Ant Design and Ant Design Mobile?

No, you cannot.

The MiniApp does not have a DOM, so it does not support any React DOM based UI libraries.

#How can I quickly develop UI components without the ready-to-use web UI libraries?

Ray supports native component libraries. For more information, see Hybrid Development.

#The page lifecycle is not invoked due to the use of a higher-order component (HOC). How to fix it?

If you use the connect function from Redux, set the option.forwardRef of connect to true. For more information, see React Redux. This solution also works for HOC from other third-party libraries.

For class components, Ray gets the page lifecycle through ref. If a page component is wrapped with a HOC, Ray gets the outermost component of the HOC instead of the wrapped component. In this case, React.forwardRef is required to forward ref to the internal component.

import React, { forwardRef } from 'react';
import { View } from '@ray-js/ray';
class IndexPage extends React.Component {
  onReady() {
    console.log('onReady is called');
  }
  render() {
    return <View>This is an example</View>;
  }
}
// HOC container is a functional component
const HOC = (Component) => {
  const Wrapped = (props, ref) => {
    // HOC logic
    return <Component {...props} ref={ref} />;
  };
  return forwardRef(Wrapped);
};
// HOC container is a class component
const ClazzHOC = (Component) => {
  class Wrapped extends React.Component {
    // HOC logic
    render() {
      const { forwardRef, ...rest } = this.props;
      return <Component {...rest} ref={forwardRef} />;
    }
  }
  // The logic is more complicated than that of the functional component.
  return forwardRef((props, ref) => <Wrapped {...props} forwardRef={ref} />);
};
//  The page exported using either of the following three methods can call `onReady` as expected.
export default ClazzHOC(IndexPage);
// export default HOC(IndexPage);
// export default IndexPage;

#I get an error saying Path Not Found after the miniapp is built. How to fix it?

Delete the build directory and try to build the miniapp again.

#What is the difference between Ray and Taro?

Taro 3.0 works basically the same way as Ray. They differ in two aspects:

• Multi-platform compatibility: Ray focuses on the key features of the framework and provides a homogeneous multi-platform mechanism with a lean multi-platform implementation (@ray-js/components) to help you build MiniApps across different platforms as needed.
• React-focused: React is one of the most popular and widely used frontend frameworks, and React will stay focused on the React stacks to provide more innovative features.