javascript - 2 different ways to create React component - Stack Overflow

admin管理员组

文章数量:1352857

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

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'))

He claim it's ES6.

But then I saw another way to create ponent.

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?

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

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'))

He claim it's ES6.

But then I saw another way to create ponent.

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?

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow edited Sep 29, 2016 at 11:05 Maxx 1,7581010 silver badges1717 bronze badges asked Sep 29, 2016 at 9:35 Maria JaneMaria Jane 2,40377 gold badges2727 silver badges4040 bronze badges 3

• 1 first is function ponent. you can't use state or lifecycle events in it, it's just render method of normal ponent. second (if you fix syntactic mistakes) is mon style of defining ponent in es2015 (es6) – Maxx Commented Sep 29, 2016 at 9:39
• the second one is wrong it should be render(){} – Aatif Bandey Commented Sep 29, 2016 at 9:39
• 4 Possible duplicate of React.createClass vs. ES6 arrow function – Chris Commented Sep 29, 2016 at 9:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

In React you can create the so-called stateful and stateless functional ponents. Stateless ponents are simple reusable ponents 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 ponent).

A simple example may be a theoretical App stateful ponent on Facebook.. 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 ponent passing to it the current state. The LoginLogout stateless ponent would then show either:

• 'Log In' text if user is not logged in, or
• 'Log Out' text if user is logged in.

You can learn more about stateful vs stateless ponents here: ReactJS difference between stateful and stateless and here React.createClass vs. ES6 arrow function

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

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

  render() {
    return (
      <div>
        <h4>Wele, 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 ponents
// 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')
);

Both of them are "equally standard". Though the syntax for the second case is off. It should read class App extends React.Component {

The second approach is the most generic one, because it allows for state, extra functionality besides the render and Component lifetime methods etc. But when you have "functional" ponents, which just display something based on their props, you have the first approach as a shorthand for a class with just the render method. When calling .render React knows how to deal with the two cases.

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

is called "stateless function ponent", which can not have state

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

the another one is a normal ponent.

本文标签： javascript2 different ways to create React componentStack Overflow