时间戳

首页 > 解决方案 > 与渲染相比，React 钩子

reactjs - 与渲染相比，React 钩子

问题描述

我很新的反应，发现当你开始一个新项目时，样板与最近有点不同。现在它带有这样的东西：

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello world!</h1>
    </div>
  );
}

export default App;

而不是像以前那样：

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello World</h1>
      </div>
    )
  }
}

export default App;

渲染功能消失了。我发现它与钩子有关。

类现在反应了吗？渲染函数也是如此吗？我知道您仍然可以使用“旧方式”，但只是为了确保我做对了。跟钩子有关系吧？

与编写组件的 render 和 class 方式相比，使用 hooks 有什么好处？

我想这也适用于 react-native ...

标签： reactjsreact-hooks

解决方案

这不是旧方式或新方式。这只是两种不同的方式已经存在了一段时间。

如果您构建没有状态的更简单的组件，则可以使用Function Components。这是您在帖子中的第一个符号：返回 JSX 表达式的函数。

如果您构建带有自己状态的更复杂的组件，并且将它们实现为类是有意义的，那么您可以使用Class Components。这是您在帖子中使用的第二个符号：具有渲染函数的类，该函数又返回一个 JSX 表达式。

两者在React 文档中都有很好的描述。

推荐阅读