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

时间:2017-01-05 15:27:40

标签: javascript reactjs

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

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

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

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

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

4 个答案:

答案 0 :(得分:13)

你可以查看它的原型,例如:

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

答案 1 :(得分:4)

类组件本质上是有状态的,但是随着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代码库中执行。

由于组件可以是各种事物,例如上下文ProviderConsumer,因此isFunctionalComponent(Component)可能不等于!isClassComponent(Component)

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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

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