Question

我有从React.Component继承的功能/无状态组件和组件：

const Component1 = () => (<span>Hello</span>)

class Component2 extends React.Component {
  render() {
    return (<span>Hello</span>)
  }
}

如何判断组件是否为无状态？有官方的方法吗？

isStateless(Component1) // true
isStateless(Component2) // false

Answer 1

你可以查看它的原型，例如：

function isStateless(Component) {
    return !Component.prototype.render;
}

Answer 2

类组件本质上是有状态的，但是随着React钩子的引入，功能组件不再称为无状态的，因为它们也可以是有状态的。

自从React 0.14起，

isReactComponent的特殊属性就存在于React.Component上。这样可以确定组件是否为类组件。

function isFunctionalComponent(Component) {
  return (
    typeof Component === 'function' // can be various things
    && !(
      Component.prototype // native arrows don't have prototypes
      && Component.prototype.isReactComponent // special property
    )
  );
}

function isClassComponent(Component) {
  return !!(
    typeof Component === 'function'
    && Component.prototype
    && Component.prototype.isReactComponent
  );
}

类似的检查在React代码库中执行。

由于组件可以是各种事物，例如上下文Provider或Consumer，因此isFunctionalComponent(Component)可能不等于!isClassComponent(Component)。

Answer 3

取决于人们所谓的“无国籍”。如果无国籍者意味着“不能拥有ref”那么它就是：

function isStateless(Component) {
  return typeof Component !== 'string' && !Component.prototype.render
}

Answer 4

这现在对我有用（反应16.12.0），以测试组件是否为功能。（我需要用它来处理是否需要用React.forwardRef包装一个组件，以避免类似https://github.com/yjose/reactjs-popup/issues/137这样的问题）

    (typeof component === "object" && typeof component.type === "function")

React - 如何确定组件是否为无状态/功能？

4 个答案: