Question

您知道没有人对大型组件使用无状态组件进行反应的原因吗，其方法定义为变量等。我最近加入了使用这种方法的项目。我很困惑。

我想最好使用小型组件，但仍然

也许对此有一些合理的解释，例如性能等。

简单的代码示例：

const myComponent = ({p1, p2, p3}) => {
    const buttonProps = {
        className: 'button',
        onClick: () => { console.log('clicked'); }
    };
    const getButtonName = () => 'Submit'; 
    const getButton = () => {
        return (
            <button ...buttonProps>{getButtonName()}<button>
        );
    }
    /* a lot of defined objects like above */
    return (
        <div>
            {getButton()}
        </div>
    );
}

主要问题是为什么为什么使用了诸如getButton（）之类的方法而不是创建MyButton组件。我想这很容易理解，调试等。

Answer 1

扩展React.Component的有状态组件有很多附加功能。基本上，您将导入React.Component中内置的所有变量和函数，例如生命周期函数。如果您不需要它们，那么无状态只会创建一个轻量级的组件。例如，当您的组件挂载时，有状态的组件将调用componentDidMount（），但无状态的组件甚至没有componentDidMount（）。

编辑：回答您更具体的问题：该函数类型是一个组件，一个功能组件，可以重用，但是在功能组件的render函数中，不能使用<>语法调用此组件。它在另一个组件内部，因此它的范围仅限于父级，并且可以访问道具。之所以基于意见，是因为使用一种组件而不是另一种组件只是在可读性，可重用性和功能性之间取得了平衡。

Answer 2

在React中，您可以具有基于类的组件，也可以具有基于函数的组件（功能组件）。

功能组件通常更易于测试和理解，并且重量更轻。

React世界的趋势是基于功能的组件。过去一年左右的时间更是如此，引入了钩子（例如useState，useEffect等），这些钩子使您可以使用轻巧的功能部件，但可以使用赋予基于类的组件更多能力的事物。

基于类的组件本身没有错，但是趋势已经远离它们了，所以听到您说您加入了一个不使用它们的项目，我并不感到惊讶。

您可能对引入钩子的2018年React Conf视频之一感兴趣：React Conf 2018相关部分始于11:30左右。

Answer 3

stateless component表示没有state，示例中的React组件将被视为functional component。至于模式本身，它也可以在class component中实现-不仅限于functional components。

例如，上面的代码可以像下面的代码那样编写，并且将产生相同的准确结果：

class MyComponent extends React.Component {
  render() {
    const buttonProps = {
      className: `button`,
      onClick: () => {}
    }
    const getButtonName = () => `Submit`
    const getButton = () => {
      return (
        <button {...buttonProps}>{getButtonName()}</button>
      )
    }
    return (
      <div>{getButton()}</div>
    )
  }
}

我不了解上下文，因此很难弄清为什么要用这种方式完成-最好请负责选择以这种方式编写组件的开发人员来找出原因。

不幸的是，幸运的是React没有被人欺负，人们可以随心所欲地自由行事，这可能会导致“奇怪”的模式总是不。

您提供的代码段创建了乍一看不清楚的不必要的抽象-我不得不弄清楚getButton的作用，然后转到getButtonName来查看{{ 1}}元素，然后我必须搜索button才能确定正在传递什么buttonProps。

如果您真的需要一个可重用的函数来返回组件，那么为什么不以“ {props”的方式使用它呢？

React

然后回到您的示例，可以在以下示例中使用它：

function Button({ children, ...rest }) {
  const defaultProps = {
    className: `button`,
    onClick: () => {}
  }
  const props = { ...defaultProps, ...rest }

  return (
    <button {...props}>
      {children}
    </button>
  )
}

这种方法更好，更清洁，因此正如您在评论中所建议的那样，// by the way, start with an uppercase when naming React components const MyComponent = ({ p1, p2, p3 }) => { return ( <div> <Button>I am a button #1!</Button> <Button onClick={() => console.log(`HelloWorld`)} > I am a button #2 with a custom `onClick` handler! </Button> </div> ) }应该写成实际的getButton组件。

使用React无状态组件很奇怪

3 个答案: