2 种不同的方式来创建 React 组件

Posted 2023-02-23

【中文标题】2 种不同的方式来创建 React 组件

【英文标题】：2 different ways to create React component

【发布时间】：2017-02-07 13:35:47

【问题描述】：

我正在关注一个 React 教程，这是作者提供的用于创建基本 React 组件的示例代码：

const React = require('react')
const ReactDOM = require('react-dom')

const App = () => 
    return (
        <div className='app-container'>
            <h1>Hello</h1>
        </div>
    )


ReactDOM.render(<App />, document.getElementById('app'))

他声称这是 ES6。

但后来我看到了另一种创建组件的方法。

class App extends React.Component 
    render()
        return <h1>Hello</h1>;

    

嗯，我现在很困惑。 react中是否有任何标准的做事方式？

【问题讨论】：

首先是函数组件。您不能在其中使用状态或生命周期事件，它只是普通组件的渲染方法。第二个（如果你修复语法错误）是 es2015 (es6) 中定义组件的常见风格

第二个错误应该是render()

React.createClass vs. ES6 arrow function的可能重复

【参考方案1】：

在 React 中，您可以创建所谓的有状态和无状态功能组件。无状态组件是简单的可重用组件，不需要维护状态。这是一个简短的演示 (http://codepen.io/PiotrBerebecki/pen/yaoOKv)，向您展示如何创建它们以及它们如何访问从父级（有状态组件）传递的道具。

一个简单的例子可能是 Facebook.com 上理论上的 App 有状态组件。它可以维护状态以跟踪用户是否登录或注销。然后在其render() 方法中，它将显示一个LoginLogout 无状态按钮组件，将当前状态传递给它。然后LoginLogout 无状态组件将显示：

如果用户未登录，则显示“登录”文本，或者 如果用户已登录，则显示“注销”文本。

您可以在此处了解有关有状态与无状态组件的更多信息：ReactJS difference between stateful and stateless 和此处React.createClass vs. ES6 arrow function

// Stateful component
class FacelookApp extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      isLoggedIn: false
    ;
  

  receiveClick() 
    this.setState(
      isLoggedIn: !this.state.isLoggedIn
    );
  

  render() 
    return (
      <div>
        <h4>Welcome, I'm a stateful parent called Facelook App</h4>
        <p>I maintain state to monitor if my awesome user logged 
          in. Are you logged in?<br />
          <b>String(this.state.isLoggedIn)</b>
        </p><br />

        <p>Hi, we are three stateless (dumb) LoginLogout buttons 
          generated using different ES6 syntax but having the same
          functionality. We don't maintain state. We will tell 
          our parent if the user clicks on us. What we render is 
          decided by the value of the prop sent to us by our parent.
        </p>

        <LoginLogout1 handleClick=this.receiveClick.bind(this) 
                isLoggedIn=this.state.isLoggedIn/>

        <LoginLogout2 handleClick=this.receiveClick.bind(this) 
                isLoggedIn=this.state.isLoggedIn/>

        <LoginLogout3 handleClick=this.receiveClick.bind(this) 
                isLoggedIn=this.state.isLoggedIn/>
      </div>
    );
  



// Stateless functional components
// created in 3 equally valid ways
const LoginLogout1 = (props) => 
  return (
    <div>
      <button onClick=() => props.handleClick()>
        LoginLogout v1 --- props.isLoggedIn ? 'Log Out' : 'Log In'
      </button>
    </div>
  );
;

// or
const LoginLogout2 = (handleClick, isLoggedIn) => (
    <div>
      <button onClick=() => handleClick()>
        LoginLogout v2 --- isLoggedIn ? 'Log Out' : 'Log In'
      </button>
    </div>
);

// or
const LoginLogout3 = (handleClick, isLoggedIn) => 
  return (
    <div>
      <button onClick=() => handleClick()>
        LoginLogout v3 --- isLoggedIn ? 'Log Out' : 'Log In'
      </button>
    </div>
  );
;



ReactDOM.render(
  <FacelookApp />,
  document.getElementById('app')
);

【讨论】：

我在答案中添加了一个简短的示例。有用吗？

有状态对我来说很奇怪，为什么我们需要保持状态？任何线索？你什么时候使用有状态和无状态？在现实世界中。

我们需要保持状态才能对事件做出“反应”并管理我们的应用程序正在发生的事情。在我的回答中查看一个真实的 Facebook 示例。按钮不需要保持状态，因此它是无状态的。另外，这篇文章和视频应该会有所帮助：thinkster.io/understanding-react-state

我刚刚更新了我的 codepen，以便为您提供更好的 Facebook 应用示例演示。查看我的答案中的链接。

【参考方案2】：

它们都是“同样标准的”。 虽然第二种情况的语法是关闭的。它应该是class App extends React.Component

第二种方法是最通用的方法，因为它允许状态、除了渲染和组件生命周期方法之外的额外功能等。但是当你有“功能”组件时，它只是根据它们的道具显示一些东西，你有第一种方法是仅具有 render 方法的类的简写。在调用 .render 时，React 知道如何处理这两种情况。

【讨论】：

最通用的意思是什么？允许状态手段？

【参考方案3】：

const App = () => 
  return (
    <div className='app-container'>
      <h1>Hello</h1>
    </div>
  )

称为“无状态函数组件”，不能有状态

https://facebook.github.io/react/docs/reusable-components.html#stateless-functions

另一个是普通组件。