Reactjs 反应-功能和组件之间的差异

我刚刚开始学习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;

class ParentComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isButtonClicked: true,
    }
  }

  render() {
    return (
      <FunctionalComponent isButtonClicked={this.state.isButtonClicked} />
    )
  }
}


//                                        | here you can grab the variable
export const FunctionalComponent = ({ isButtonClicked }) => {
  if (isButtonClicked) {
    return (...clickedButton)
  }

  return (...unclickedButton)
}

---

默认App.js最近是否有任何更改

一个称为功能组件，没有可参考的

this.state

，但UI由

this.props

控制。另一个是完整的组件，您可以在其中使用

this.state

。此外，功能组件没有

render

方法，它们只返回JSX

功能组件通常性能更高，当您不需要在组件中使用

this.setState

时，应该使用功能组件

如果您想在功能组件中打开和关闭按钮，您将无法使用其内部状态来打开和关闭它，因为它首先没有内部状态。您必须使用

this.props.isButtonClicked

引用父组件，例如：

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;

class ParentComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isButtonClicked: true,
    }
  }

  render() {
    return (
      <FunctionalComponent isButtonClicked={this.state.isButtonClicked} />
    )
  }
}


//                                        | here you can grab the variable
export const FunctionalComponent = ({ isButtonClicked }) => {
  if (isButtonClicked) {
    return (...clickedButton)
  }

  return (...unclickedButton)
}

类ParentComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
isButtonClicked:对，
}
}
render（）{
返回(
)
}
}
//|这里您可以获取变量
导出常量FunctionalComponent=（{isButtonClicked}）=>{
如果（isButtonClicked）{
返回（…单击按钮）
}
返回（…未点击按钮）
}

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

另一方面，您可以制作一个具有自身内部状态的按钮，以决定其是否单击

---

编辑：使用React钩子，您现在可以在功能组件中拥有状态。我的错。

是的，这是最近的变化。2019年3月合并

实际上，两个版本的

App.js

之间没有区别，因为类只实现

render

方法。在这里使用类组件是非常好的，并且没有计划从react.js中删除类组件

---

您必须询问CreateReact应用程序团队为什么要更改它。他们可能希望尽可能使用功能组件。随着react 16.8中引入钩子，过去需要类组件的几乎所有内容现在都可以使用功能组件来完成。

是的，它现在是一个功能性组件而不是类组件。对建议的副本的某些答案的可能副本已经过时。随着react 16.8中钩子的引入，您将很少或永远不需要类组件（当然，除非您真的喜欢类）。函数组件当然可以有状态。这就是它的用途。