2種類の方法は、私はチュートリアルを反応させ、下記たコンポーネント

Question

を反応させ、これは著者が、基本的なリアクトコンポーネントを作成するために、与えられたサンプルコードです：

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>; 

    } 
} 

hmm私は今混乱しています。反応の中で物事を行う標準的な方法はありますか？

Answer 1

あなたは、いわゆるステートフル機能コンポーネントとステートレス機能コンポーネントを作成できます。ステートレスコンポーネントは、状態を維持する必要のない単純な再利用可能なコンポーネントです。ここでは簡単なデモ（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') 
); 

Answer 2

両方とも「同等に標準」です。 2番目のケースの構文はオフですが。それは読む必要がありますclass App extends React.Component {

2番目のアプローチは、レンダリングやコンポーネントのライフタイムメソッドのほかに、状態や余分な機能を提供するため、最も一般的な方法です。しかし、機能的なコンポーネントがあれば、小道具の場合、レンダリングメソッドだけのクラスの省略形としての最初のアプローチがあります。 .renderを呼び出すとき、Reactは2つのケースを処理する方法を知っています。

Answer 3

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

：ここではステートレスコンポーネント対ステートフルについての詳細を学びます

は、もう一つは正常成分である状態を持つことができない

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

、「ステートレス機能成分」と呼ばれます。