一个人可以在不写任何 class 的情况下使用 reactjs 吗？

Question

我想知道，如果类只是原型的语法糖，而 es6 增强了功能编码，我们是否可以编写纯功能性的 reactJS 代码（并且不遗漏生命周期方法）？

[编辑]

想一想最复杂的 React 应用程序，它是否可以纯函数式编写 - 这样做有意义吗？

编辑 2019 年 5 月： React Hooks 在这里：https://reactjs.org/docs/hooks-reference.html

Answer 1

注意：我的示例缺少由@estus 实现的生命周期方法，因此如果您不需要这些生命周期方法，您可以使用下面的代码

是的，你可以

import React from ‘react’;

function MyComponent(){
 return <div>Hello</div>
}

export default MyComponent;

Live Example

Answer 2

你可以使用无状态组件

本文详解

https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc

示例：对于无状态组件

import React from ‘react’;

const HelloWorld = ({name}) => (
 <div>{`Hi ${name}`}</div>
);

export default HelloWorld;

Answer 3

不，这不是一种做事方式。 React 为我们提供了两种类型的组件。我们将它们用于特定的 purpose.Not 一切都可以用无状态组件（函数）编写。无状态组件通常是只呈现 jsx 而没有本地状态的表示组件。我们不能在无状态组件中编写方法，而有状态组件（基于class）出现了，我们可以在其中管理自己的状态并将方法写入其中。此外，它为我们提供了更多控制来渲染我们的子组件。所以 React 中的一切都遵循一种模式，它允许利用单向绑定的力量。

Answer 4

ES6 classes 是函数的语法糖并且（有一些例外）可以将它们重写为函数，这就是像 Babel 和 TypeScript 这样的转译器所做的。

由于组件 class 继承自 React.Component，它需要从它原型继承。 React.Component 没有静态属性，因此组件不需要继承它们。

这个组件

class App extends React.Component {
  state = { name: 'foo' };

  componentDidMount() {
    this.setState({ name: 'bar'});
  }

  render() {
    return <p>{this.state.name}</p>;
  }
}

变成

function App(props) {
  React.Component.call(this, props);
  this.state = { name: 'foo' };
}

App.prototype = Object.create(React.Component.prototype);
App.prototype.constructor = App;

App.prototype.componentDidMount = function () {
  this.setState({ name: 'bar'});
};

App.prototype.render = function () {
  return React.createElement('p', null, this.state.name);
};

这是现已弃用的 React.createClass 最初所做的，create-react-class 助手 serves this purpose。

if classes are just syntax sugar for prototypes, and es6 enhances functional coding, can we write reactJS code purely functionally(and without missing out on lifecycle methods)?

我们可以，但是功能组件与使用脱糖 JavaScript class 编写的组件不是一回事。 Functional component 是特定的 React 术语，指的是 stateless 功能组件。无状态组件没有状态和生命周期挂钩。单独使用无状态组件编写真正的 React 应用程序是不可能的，或者至少是不切实际的。

Think of the most complex react app, can that be written purely functionally - and would it make sense to do that?

故意避免使用 ES6 class 语法通常没有意义，因为缺少语法糖会导致代码冗长且缺乏表达力，没有任何好处。常规的 React 应用程序仍然需要使用构建步骤和 Babel 来转换 JSX 语法，因为去糖化的 JSX 是一个冗长的 React.createElement 调用层次结构。只有在不需要引入构建步骤的非 React ES5 应用程序中使用很少的 React 组件时才实用。

但是，这可能适用于第三方库，例如recompose。它旨在与功能组件一起使用，例如lifecycle 帮助程序允许将生命周期挂钩附加到它们。当然，它在内部使用组件 class 来做到这一点。

一个人可以在不写任何 class 的情况下使用 reactjs 吗？

Can one use reactjs without writing any class?

functional-programming

ecmascript-6

reactjs

react-hooks