ESLint - 组件应该写成纯函数(反应首选/无状态函数)

Question

ESLint在反应项目上给了我这个错误.

ESLint - 组件应该写成纯函数(反应首选/无状态函数)

它指向组件的第一行.

export class myComponent extends React.Component {
render() {
    return (

      //stuff here

    );
  }
}

我该如何摆脱这个错误？

Answer 1

两个选择.

暂时禁用警告

^{(未经测试;有多种方法可以做到这一点.)}

// eslint-disable-next-line react/prefer-stateless-function
export class myComponent extends React.Component {
  ...
}

使用纯无状态组件

返回值是将要呈现的内容(例如,您基本上是在编写基于类的组件的render方法:

export const myComponent = () => {
  return (
    // JSX here
  )
}

(或者如果那是你的话,请使用非ES6表示法.)

对于像这样没有其他支持逻辑的组件,我更喜欢隐式返回,例如,

export MyComponent = () =>
  <div>
    // Stuff here
  </div>

这是一个偏好的问题.我会说你应该遵循React命名约定,并保持所有组件以大写字母开头.

^{ESLint可能会抱怨多线JSX表达式周围丢失的parens,因此禁用该规则或使用parens.}

如果你需要道具,它们会作为参数传递给函数:

const MyComponent = (props) =>
  <div>
    <Something someProp={props.foo} />
  </div>

export MyComponent

为方便起见,您可以像往常一样对参数进行解构:

const MyComponent = ({ foo }) =>
  <div>
    <Something someProp={foo} />
  </div>

如果您使用本地变量,这可以使隐式返回更容易一些.PropTypes除非你声明,否则你会得到关于失踪的ESLint警告; 因为它不是一个你不能简单地static propTypes在课堂上使用的课程,所以它们必须附加到这个功能上(无论如何,很多人都喜欢这个功能).

Answer 2

添加构造函数（），如：

exports class myComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>Hello</div>
    );
  }
}

Answer 3

将您的组件编写为无状态函数：

export myComponent = () => { //stuff here };

在React中定义组件实际上有两种样式：功能组件（只是从props到React组件的函数）和类组件。

它们之间的主要区别是，类组件可以具有state和生命周期方法如componentDidMount，componentDidUpdate等

每当不需要生命周期方法的状态时，都应将组件编写为无状态函数，因为无状态组件通常更容易推理。

要编写功能组件，您需要编写一个带有单个参数的函数。该参数将接收组件的道具。因此，您无需使用this.props访问组件的属性，而只需使用函数的参数即可。

Answer 4

如果您依赖props，那么有一种更好的（在撰写本文时有些争议）方法来修复此错误，而无需写出无状态函数 - 通过编写PureComponent并使用此 eslint 规则[source]：

"react/prefer-stateless-function": [2, { "ignorePureComponents": true }],

根据上述规则，以下代码段有效（因为它取决于props）

class Foo extends React.PureComponent {
  render() {
    return <div>{this.props.foo}</div>;
  }
}

React 团队计划围绕 SFC 构建优化，但目前还没有。所以在这之前，SFCs不会提供任何好处PureComponents。事实上，它们会稍微糟糕一些，因为它们不会防止浪费渲染。