はどのようにreactJs

Question

と、このコードの作品は、私は次のコードを持っているん：

import React from 'react' 
import Header from '../../components/Header' 

export const CoreLayout = ({ children }) => (
    <div>test</test> 
) 

CoreLayout.propTypes = { 

} 

export default CoreLayout 

をしかし、私は、これはそれが反応している選んでいるかを理解していません。私は上記示したコード化に機能を追加することができますどのように

import React from 'react'; 
const Contacts = React.createClass({ 
    render() { 
    return (
     <div></div> 
    ); 
    } 
}); 
export default Contacts; 

または

import React from 'react'; 
class Contacts extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return (
     <div></div> 
    ); 
    } 
} 
export default Contacts; 

：私はに慣れていますか？テンプレートにロジックを追加する機能と似ています。ここで

Answer 1

export const CoreLayout = ({ children }) => (
    <div>test</test> 
) 

、CoreLayoutは機能ステートレスコンポーネントと呼ばれています。

コンポーネントについては、React docsの最初の例は機能的なステートレスコンポーネントです。

ステートレスコンポーネントは次のように定義することができます

function Welcome(props, context) { 
    return <h1>Hello, {props.name}</h1>; 
} 

OR使用アロー機能彼らは次のような特徴を持っている

const Welcome = (props, context) => { 
    return <h1>Hello, {props.name}</h1>; 
} 

：

• 彼らは純粋な関数です。
• （最初の引数propsと第二contextで）いいえクラスは
• ませthisキーワード
• ませ状態とライフサイクルメソッドを必要としません。
• わかりやすい
• とりわけ、シンプルでエレガントです。

Answer 2

ステートレスコンポーネントを破棄するには、いくつかのオプションがあります。

最初に、ロジックの各部分を独立したステートレスコンポーネントに分割します。

export const CoreLayout = ({ children }) => (
    <div> 
    <ConditionalHeader showing={true} /> 
    </div> 
) 

export const ConditionalHeader = ({ showing }) => (
    showing ? <Header /> : null 
) 

また、コンポーネント内にヘルパー関数を定義することもできます。

export const CoreLayout = ({ children }) => { 
    const renderHeader =() => showing ? <Header /> : null 

    return (
    <div> 
     {renderHeader()} 
    </div> 
) 
}