我想知道，如果类只是原型的语法糖，而 es6 增强了函数式编码，我们是否可以纯粹地编写 reactJS 代码（并且不会错过生命周期方法）？
[编辑]
想一想最复杂的 React 应用程序，它可以纯粹用功能编写吗？这样做有意义吗？
编辑 2019 年 5 月：React Hooks 在这里：https ://reactjs.org/docs/hooks-reference.html
问问题
84 次
4 回答
2
你可以使用无状态组件
这篇文章解释
示例：对于无状态组件
import React from ‘react’;
const HelloWorld = ({name}) => (
<div>{`Hi ${name}`}</div>
);
export default HelloWorld;
于 2018-09-02T08:52:54.693 回答
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);
};
这是 now-deprecatedReact.createClass最初所做的，create-react-classhelper服务于这个目的。
如果类只是原型的语法糖，而 es6 增强了函数式编码，我们是否可以纯函数式地编写 reactJS 代码（并且不会错过生命周期方法）？
我们可以，但功能组件与使用脱糖 JavaScript 类编写的组件不同。功能组件是特定的 React 术语，指的是无状态的功能组件。无状态组件没有状态和生命周期挂钩。仅使用无状态组件编写真正的 React 应用程序是不可能的，或者至少是不切实际的。
想一想最复杂的 React 应用程序，它可以纯粹用功能编写吗？这样做有意义吗？
故意避免 ES6 类语法通常是没有意义的，因为缺少语法糖会导致冗长且缺乏表达力的代码没有任何好处。常规的 React 应用程序仍然需要使用构建步骤和 Babel 来转换 JSX 语法，因为去糖 JSX 是详细React.createElement调用的层次结构。只有在不需要引入构建步骤的非 React ES5 应用程序中使用少量 React 组件时才实用。
但是，这可以通过第三方库来实现，例如recompose. 它旨在与功能组件一起使用，例如lifecyclehelper 允许将生命周期挂钩附加到它们。当然，它在内部使用组件类来做到这一点。
于 2018-09-02T14:20:14.723 回答
1
注意 ：我的示例缺少 @estus 实现的生命周期方法，因此如果您不需要这些生命周期方法，则可以使用以下代码
是的你可以
import React from ‘react’;
function MyComponent(){
return <div>Hello</div>
}
export default MyComponent;
于 2018-09-02T08:51:31.637 回答
0
不，这不是做事的方式。React 为我们提供了两种类型的组件。我们将它们用于特定目的。并非所有内容都可以用无状态组件（函数）编写。无状态组件通常是只呈现 jsx 并且没有本地状态的表示组件。我们不能在无状态组件中编写方法，这里出现了有状态组件（基于类），我们在其中管理自己的状态并将方法写入其中。此外，它为我们提供了更多控制来渲染我们的子组件。所以反应中的一切都遵循一种模式，它允许利用单向绑定的力量。
于 2018-09-02T09:38:31.737 回答