React
React.Componentを継承する
サーチ…
構文
- ケース1：React.createClass（{}）
- ケース2：MyComponentクラスがReact.Component {}を継承する
備考
React.createClass は React.createClass で廃止され、v16で削除される予定です。依然として必要なもののためのドロップイン交換パッケージがあります。それを使用する例を更新する必要があります。
反応成分の作成
2つのコード例を比較して構文の違いを調べてみましょう。
React.createClass（非推奨）
ここでは、Reactクラスが割り当てられたconstを持っています。典型的なベースコンポーネント定義を完了するには、 render関数を続けます。
import React from 'react';
const MyComponent = React.createClass({
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
上記のReact.createClass定義をとり、それをES6クラスを使用するように変換しましょう。
import React from 'react';
class MyComponent extends React.Component {
render() {
return (
<div></div>
);
}
}
export default MyComponent;
この例では、現在ES6クラスを使用しています。 Reactの変更では、React.createClassに直接アクセスするのではなく、 MyComponentというクラスを作成し、React.Componentから継承します。このようにして、Reactの定型文やJavaScriptを少なくします。
PS：通常、これは他のブラウザで動作するようにES6からES5をコンパイルするために、Babelのようなもので使用されます。
既定の小道具とPropTypeを宣言する
デフォルト小道具とその種類を使用し宣言する方法には重要な変更があります。
React.createClass
このバージョンでは、 propTypesプロパティは各propの型を宣言できるObjectです。 getDefaultPropsプロパティは、オブジェクトを返して初期小道具を作成する関数です。
import React from 'react';
const MyComponent = React.createClass({
propTypes: {
name: React.PropTypes.string,
position: React.PropTypes.number
},
getDefaultProps() {
return {
name: 'Home',
position: 1
};
},
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
このバージョンでは、 propTypesをcreateClass定義オブジェクトの一部としてプロパティではなく、実際のMyComponentクラスのプロパティとして使用します。
getDefaultPropsは、defaultPropsというクラスのObjectプロパティに変更されました。これはもはやget関数ではなく、単なるObjectです。より多くのReactの定型文を回避します。これは単純なJavaScriptです。
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}
MyComponent.propTypes = {
name: React.PropTypes.string,
position: React.PropTypes.number
};
MyComponent.defaultProps = {
name: 'Home',
position: 1
};
export default MyComponent;
さらに、 propTypesとdefaultProps別の構文もあります。これは、あなたのビルドにES7プロパティ初期設定が有効になっている場合のショートカットです：
import React from 'react';
class MyComponent extends React.Component {
static propTypes = {
name: React.PropTypes.string,
position: React.PropTypes.number
};
static defaultProps = {
name: 'Home',
position: 1
};
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}
export default MyComponent;
初期状態を設定する
初期状態の設定方法に変更があります。
React.createClass
初期状態のオブジェクトを単に返すgetInitialState関数があります。
import React from 'react';
const MyComponent = React.createClass({
getInitialState () {
return {
activePage: 1
};
},
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
このバージョンでは、 getInitialState関数を使用する代わりに、すべての状態をコンストラクタの単純な初期化プロパティとして宣言します。これは単純なJavaScriptなので、「React API」が少なくなっているように感じます。
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
activePage: 1
};
}
render() {
return (
<div></div>
);
}
}
export default MyComponent;
ミックスイン
我々は使用することができますmixins唯一React.createClassの方法で。
React.createClass
このバージョンでは、使用可能なミックスインの配列を取るmixinsプロパティを使用して、コンポーネントにmixinsを追加できます。これらはコンポーネントクラスを拡張します。
import React from 'react';
var MyMixin = {
doSomething() {
}
};
const MyComponent = React.createClass({
mixins: [MyMixin],
handleClick() {
this.doSomething(); // invoke mixin's method
},
render() {
return (
<button onClick={this.handleClick}>Do Something</button>
);
}
});
export default MyComponent;
React.Component
ES6で書かれたReactコンポーネントを使用する場合、React mixinsはサポートされません。さらに、ReactのES6クラスはサポートされません。彼らは有害であると考えられているからです。
"this" Context
React.createClassを使用すると、自動的にthisコンテキスト（値）が正しくバインドされますが、ES6クラスを使用している場合はそうではありません。
React.createClass
this.handleClickメソッドがバインドされたonClick宣言に注目してください。このメソッドが呼び出されると、ReactはhandleClick正しい実行コンテキストを適用します。
import React from 'react';
const MyComponent = React.createClass({
handleClick() {
console.log(this); // the React Component instance
},
render() {
return (
<div onClick={this.handleClick}></div>
);
}
});
export default MyComponent;
React.Component
ES6クラスの場合、 thisはデフォルトではnullです。クラスのプロパティは自動的にReactクラス（コンポーネント）インスタンスにバインドされません。
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
console.log(this); // null
}
render() {
return (
<div onClick={this.handleClick}></div>
);
}
}
export default MyComponent;
this文脈では、私たちが正しいことに縛ることができるいくつかの方法があります。
ケース1：バインドインライン：
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
console.log(this); // the React Component instance
}
render() {
return (
<div onClick={this.handleClick.bind(this)}></div>
);
}
}
export default MyComponent;
ケース2：クラスコンストラクタでバインドする
別のアプローチは、文脈の変化しているthis.handleClick内部のconstructor 。このようにして、インライン反復を避けます。 JSXに全く触れることを避けるより良いアプローチとして、多くの人が考えています。
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log(this); // the React Component instance
}
render() {
return (
<div onClick={this.handleClick}></div>
);
}
}
export default MyComponent;
ケース3：ES6の無名関数を使用する
明示的にバインドしなくても、ES6の匿名関数を使用することもできます。
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
handleClick = () => {
console.log(this); // the React Component instance
}
render() {
return (
<div onClick={this.handleClick}></div>
);
}
}
export default MyComponent;
ES6 / ajaxに "this"キーワードを反応させてサーバーからデータを取得する
import React from 'react';
class SearchEs6 extends React.Component{
constructor(props) {
super(props);
this.state = {
searchResults: []
};
}
showResults(response){
this.setState({
searchResults: response.results
})
}
search(url){
$.ajax({
type: "GET",
dataType: 'jsonp',
url: url,
success: (data) => {
this.showResults(data);
},
error: (xhr, status, err) => {
console.error(url, status, err.toString());
}
});
}
render() {
return (
<div>
<SearchBox search={this.search.bind(this)} />
<Results searchResults={this.state.searchResults} />
</div>
);
}
}
