Question

我才刚刚开始学习React，我注意到最初创建的App.js组件与教程中的组件（这是最近的）有所不同。

生成的内容如下：

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

教程中的那个看起来很相似，但是看起来像这样：

import React from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component  {
  render() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
)
}

export default App;

最近对默认App.js进行了更改吗？

Answer 1

是的，这是一个相当新的变化。它于2019年3月合并。

https://github.com/facebook/create-react-app/pull/6451

在实践中，App.js的两个版本之间没有区别，因为该类仅实现render方法。在这里使用类组件非常好，并且没有计划从react.js中删除类组件。

您将不得不询问create-react-app团队为什么要更改它。他们大概希望尽可能使用功能组件。随着react 16.8中钩子的引入，几乎所有以前需要类组件的东西现在都可以使用功能组件来完成。

Answer 2

一个被称为功能组件，并且没有可以引用的data，而是UI由this.state控制。另一个是功能完善的组件，您可以在其中使用this.props。此外，功能组件没有this.state方法，它们只返回JSX。

功能组件通常性能更高，在不需要在组件内使用render时应使用。

如果要在功能组件内打开和关闭按钮，则无法使用其内部状态来操作它-因为它最初没有按钮。您必须使用this.setState来引用PARENT组件，例如：

this.props.isButtonClicked

正如您在此处看到的那样，功能组件的状态由PARENT定义。父级的状态决定是否单击它。这是拥有类组件的好处。

另一方面，您可以创建一个具有其内部状态的按钮，以决定是否单击该按钮。

编辑：因此，通过React钩子，您现在可以在功能组件中拥有状态。我不好。

React-功能和组件之间的差异

2 个答案: