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

    } 
} 

嗯我現在很困惑。有沒有任何標準的做事方式？

Answer 1

在React中，您可以創建所謂的有狀態和無狀態功能組件。無狀態組件是簡單的可重用組件，不需要維護狀態。這是一個簡短的演示（http://codepen.io/PiotrBerebecki/pen/yaoOKv），向您展示如何創建它們以及如何訪問父項（有狀態組件）傳遞的道具。

一個簡單的例子可以是在Facebook.com理論App狀態組件。它可以保持狀態來跟蹤用戶是否登錄或註銷。然後在其render()方法中，它將顯示一個LoginLogout無狀態按鈕組件傳遞給它當前狀態。然後LoginLogout無狀態組件將顯示任一方法：

• 「登錄」文本，如果如果用戶登錄的用戶沒有登錄，或
• 「註銷」文本

你可以瞭解更多關於狀態VS無狀態組件在這裏：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

兩者都是「同樣標準」。 雖然第二種情況的語法是關閉的。它應該閱讀class App extends React.Component {

第二種方法是最常用的一個，因爲它允許狀態，額外的功能除了渲染和組件生命週期方法等等。但是當你有「功能性」的成分，這只是顯示一些基於他們道具，你有第一種方法作爲一個只有渲染方法的類的簡寫。當調用.render時，React知道如何處理這兩種情況。

Answer 3

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

被稱爲「無狀態功能部件」，它不能有狀態

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

的另一個是正常組分。