在反应组件中的类之外编写函数

Question

我见过这样的代码

function abc(){
  return 'abc'
}
class MyComponent extends React.Component {
    static abc = abc;
    render() { return <h1>{this.abc}</h1>; }
}

其中函数abc是在反应类之外定义的。我不知道作者为什么这样做，为什么不能在课堂上这样做？

Answer 1

这些是ES6 静态方法，并不是 React 独有的。它们是组件类的成员，而不是组件实例的成员。它们在 React 中没有被广泛使用，但它们很有用。它甚至在React 文档中提到：

有时在 React 组件上定义静态方法很有用。例如，Relay 容器公开了一个静态方法 getFragment 以促进 GraphQL 片段的组合。

它们可以用作组件的公共成员，由它的所有实例共享。给你一个想法，React 类的其他静态成员是displayName和defaultProps。

另请参阅React 中的静态方法。如您所见，使用静态方法的情况并不多。