Question

我想知道，如果类只是原型的语法糖，而es6增强了功能编码，那么我们可以纯粹地编写函数性的ReactJS代码吗（而不会遗漏生命周期方法）？

[编辑]

考虑到最复杂的react应用，可以纯粹用功能编写吗？这样做有意义吗？

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

Answer 1

您可以使用无状态组件

本文说明

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 2

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

由于组件类是从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帮助者serves this purpose的支持者，现已弃用的create-react-class。

如果类只是原型的语法糖，并且es6增强了功能编码，那么我们是否可以纯粹地功能地编写reactJS代码（并且不会错过生命周期方法）？

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

考虑到最复杂的react应用，可以纯粹用功能编写吗？这样做有意义吗？

总的来说，故意避免使用ES6类语法是没有意义的，因为缺少语法糖会导致冗长和缺乏表现力的代码，而没有任何好处。常规的React应用程序仍然需要使用build步骤和Babel来转换JSX语法，因为已废止的JSX是冗长的React.createElement调用的层次结构。只有在不需要引入构建步骤的非React ES5应用程序中使用很少的React组件时，这才是可行的。

但是，第三方库（例如recompose。它旨在与功能组件一起使用，例如lifecycle辅助程序允许将生命周期挂钩连接到它们。当然，它在内部使用组件类来实现。

Answer 3

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

是的

import React from ‘react’;

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

export default MyComponent;

Live Example

Answer 4

不，这不是做事的方法。 React提供了两种类型的组件。我们将它们用于特定目的不是所有的东西都可以用无状态组件（函数）编写。无状态组件通常是表示组件，它们仅呈现jsx而没有本地状态。我们无法在无状态组件中编写方法，而这里出现了有状态组件（基于类），我们在其中管理自己的状态并将方法写入其中。此外，它使我们能够更好地控制子组件的渲染。因此，反应中的所有内容都遵循一种模式，并允许利用单向绑定的功能。

不用编写任何类就可以使用reactjs吗？

4 个答案: