React
React.createClass बनाम React.Component का विस्तार करता है

वाक्य - विन्यास

• केस 1: React.createClass ({})
• केस 2: वर्ग MyComponent का विस्तार React.Component {}

टिप्पणियों

रिएक्ट कंपोनेंट बनाएं

चलो दो कोड उदाहरणों की तुलना करके वाक्यविन्यास अंतर का पता लगाएं।

React.createClass (पदावनत)

यहाँ हम एक है 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 कक्षाओं का उपयोग कर रहे हैं। प्रतिक्रिया परिवर्तनों के लिए, अब हम MyComponent नामक एक वर्ग बनाते हैं और React.createClass तक सीधे पहुंचने के बजाय React.Component से विस्तार करते हैं। इस तरह, हम कम अभिक्रिया बॉयलरप्लेट और अधिक जावास्क्रिप्ट का उपयोग करते हैं।

पुनश्च: आमतौर पर इसका उपयोग बाबेल की तरह कुछ अन्य ब्राउज़रों में काम करने के लिए ES6 से ES5 को संकलित करने के लिए किया जाएगा।

डिफ़ॉल्ट प्रॉप्स और प्रोपटीपर्स को डिक्लेयर करें

हम डिफ़ॉल्ट प्रॉप्स और उनके प्रकारों का उपयोग करने और घोषित करने के तरीके में महत्वपूर्ण बदलाव कर रहे हैं।

React.createClass

इस संस्करण में, propTypes गुण एक ऑब्जेक्ट है जिसमें हम प्रत्येक प्रोप के लिए प्रकार की घोषणा कर सकते हैं। 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

यह संस्करण createClass परिभाषा ऑब्जेक्ट के भाग के रूप में एक संपत्ति के बजाय वास्तविक MyComponent वर्ग पर एक संपत्ति के रूप में propTypes का उपयोग करता है।

getDefaultProps अब डिफ़ॉल्ट रूप से क्लास नामक एक ऑब्जेक्ट प्रॉपर्टी में बदल गया है, क्योंकि यह अब " getDefaultProps " फ़ंक्शन नहीं है, यह सिर्फ एक ऑब्जेक्ट है। यह अधिक रिएक्ट बायलरप्लेट से बचता है, यह सिर्फ सादे जावास्क्रिप्ट है।

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 फ़ंक्शन का उपयोग करने के बजाय, सभी राज्य को कंस्ट्रक्टर में एक साधारण प्रारंभिक संपत्ति के रूप में घोषित करते हैं। ऐसा लगता है कि यह कम "रिएक्ट एपीआई" संचालित है क्योंकि यह केवल सादे जावास्क्रिप्ट है।

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

हम उपयोग कर सकते हैं mixins केवल React.createClass तरीके के साथ।

React.createClass

इस संस्करण में हम जोड़ सकते हैं mixins 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 में लिखे गए रिएक्ट घटकों का उपयोग करते समय रिएक्ट मिश्रण का समर्थन नहीं किया जाता है। इसके अलावा, उनके पास प्रतिक्रिया में ES6 वर्गों के लिए समर्थन नहीं होगा। कारण यह है कि उन्हें हानिकारक माना जाता है ।

"यह" प्रसंग

React.createClass का उपयोग करके स्वचालित रूप से this संदर्भ (मान) को सही ढंग से बाँध दिया जाएगा, लेकिन ES6 कक्षाओं का उपयोग करते समय ऐसा नहीं है।

React.createClass

नोट onClick साथ घोषणा this.handleClick विधि बाध्य। जब यह विधि प्रतिक्रिया कहलाती है, तो handleClick पर 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 है, वर्ग के गुण स्वचालित रूप से प्रतिक्रिया वर्ग (घटक) के उदाहरण के लिए बाध्य नहीं करते हैं।

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;

सर्वर से डेटा प्राप्त करने के लिए ajax के साथ ES6 / रिएक्ट "यह" कीवर्ड

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