2种不同的方式来创建React组件 [英] 2 different ways to create React component

问题描述

我正在跟踪一个反应教程，这是作者为创建一个基本的React组件而提供的示例代码：

I was following a react tutorial and this is the example code the author has given to create a basic React component:

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。

但是，我看到了另一种创建组件的方式。

But then I saw another way to create component.

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

    }
}

现在我很困惑。有没有任何标准的做事方式做出反应？

hmm I'm confused now. Is there any standard way of doing things in react?

推荐答案

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

In React you can create the so-called stateful and stateless functional components. Stateless components are simple reusable components which do not need to maintain state. Here is a short demo (http://codepen.io/PiotrBerebecki/pen/yaoOKv) showing you how you can create them and how they can access props passed from the parent (stateful component).

一个简单的例子可能是理论上的应用程序 Facebook.com上的有状态组件。如果用户登录或注销，它可以保持状态。然后在其 render（）方法中，它将显示一个 LoginLogout 无状态按钮组件传递给当前状态。然后， LoginLogout 无状态组件将显示：

A simple example may be a theoretical App stateful component on Facebook.com. It could maintain state to track if user is logged in or logged out. Then in its render() method it would show a LoginLogout stateless button component passing to it the current state. The LoginLogout stateless component would then show either:

• '登录'文本if用户未登录，或


• 注销文本，如果用户登录。

您可以在这里了解有关状态与无状态组件的更多信息：有状态和无状态之间的ReactJS差异和这里 React.createClass与ES6箭头功能

You can learn more about stateful vs stateless components here: ReactJS difference between stateful and stateless and here 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')
);

这篇关于2种不同的方式来创建React组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！