無狀態函式式元件

建立無狀態函式式元件形式是從React 0.14版本開始出現的。它是為了建立純展示元件，這種元件只負責根據傳入的props來展示，不涉及到要state狀態的操作。

function HelloComponent(props, /* context */) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode) 

const FindComponent=()=> {
  return <div>OH!</div>
}
 

React.createClass

但現在基本不用React也會慢慢將其淘汰

React.Component

class InputControlES6 extends React.Component {
    constructor(props) {
        super(props);

        // 設定 initial state
        this.state = {
            text: props.initialValue || 'placeholder'
        };

        // ES6 類中函式必須手動繫結
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }

    render() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange}
               value={this.state.text} />
            </div>
        );
    }
}
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: ''
};