快捷導(dǎo)航

React項目使用ES6解決方案及JSX使用示例詳解

更新時間：2022年12月23日 16:29:37 作者：黎燃

這篇文章主要為大家介紹了React項目使用ES6解決方案及JSX使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

不使用 ES6

然而，在純?yōu)g覽器端使用ES6語法時，瀏覽器支持存在差異，這需要特殊處理才能正常運行。支持ES2015桌面瀏覽器 Chrome：從51版開始，它可以支持ES6 97%的新功能。 Firefox：53版本支持97%的ES6新功能。 Safari：從版本10開始，ES6 99%的新功能都可以得到支持。 IE:Edge 15可以支持96%的ES6新功能。 Edge 14可以支持93%的新ES6功能。（IE7~11基本不支持ES6）

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

綁定

對于使用ES6類關(guān)鍵字創(chuàng)建的React組件，組件中的方法遵循與常規(guī)ES6類相同的語法規(guī)則。這意味著這些方法不會自動將其綁定到此組件實例。需要顯式調(diào)用。在構(gòu)造函數(shù)中綁定（this）：

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
    // 這一行很重要！
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    alert(this.state.message);
  }
  render() {
    // 由于 `this.handleClick` 已經(jīng)綁定至實例，因此我們才可以用它來處理點擊事件
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

這意味著，如果使用ES6類關(guān)鍵字創(chuàng)建組件，則在處理事件回調(diào)時需要編寫更多代碼。但對于大型項目，這可以提高運營效率。如果你認為上面的編寫方法很乏味，你可以嘗試使用Babel插件類屬性，它仍然處于實驗階段。

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
  }
  // 警告：這種語法還處于試驗性階段！
  // 在這里使用箭頭函數(shù)就可以把方法綁定給實例：
  handleClick = () => {
    alert(this.state.message);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

請注意，上述語法仍處于實驗階段，這意味著語法可能隨時發(fā)生變化，最終可能不會包含在框架標(biāo)準中。為了安全起見，可以采用以下三種方法：在構(gòu)造函數(shù)中綁定方法。使用箭頭函數(shù)，例如onClick={（e）=>this.handleClick（e）}。繼續(xù)使用createReactClass。

var SetIntervalMixin = {
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.forEach(clearInterval);
  }
};
var createReactClass = require('create-react-class');
var TickTock = createReactClass({
  mixins: [SetIntervalMixin], // 使用 mixin
  getInitialState: function() {
    return {seconds: 0};
  },
  componentDidMount: function() {
    this.setInterval(this.tick, 1000); // 調(diào)用 mixin 上的方法
  },
  tick: function() {
    this.setState({seconds: this.state.seconds + 1});
  },
  render: function() {
    return (
      <p>
        React has been running for {this.state.seconds} seconds.
      </p>
    );
  }
});
ReactDOM.render(
  <TickTock />,
  document.getElementById('example')
);

如果完全不同的組件具有相似的功能，這將導(dǎo)致“交叉關(guān)注”的問題。為了解決這個問題，當(dāng)使用createReactClass創(chuàng)建React組件時，引入mixin函數(shù)將是一個很好的解決方案。更常見的用法是組件定期更新。這個函數(shù)可以很容易地用setInterval（）實現(xiàn)，但需要注意的是，當(dāng)不再需要它時，應(yīng)該清除它以節(jié)省內(nèi)存。React提供了一種生命周期方法，這樣就可以知道何時創(chuàng)建或銷毀了組件。讓我們創(chuàng)建一個簡單的mixin，它使用這些方法來提供一個簡單setInterval（）函數(shù)，該函數(shù)將在組件被破壞時自動清理。

class Greeting extends React.Component {
  // ...
}
Greeting.defaultProps = {
  name: 'Mary'
};

如果一個組件有多個mixin，并且在這些mixin中定義了相同的生命周期方法（例如，當(dāng)一個組件被破壞時，幾個mixin希望進行一些清理），則將調(diào)用這些生命周期方法。當(dāng)使用mixin時，mixin將首先按照定義的順序執(zhí)行，然后調(diào)用組件上的相應(yīng)方法。

JSX如何？

React不強制使用JSX。當(dāng)不想在構(gòu)建環(huán)境中配置JSX編譯時，在React中不使用JSX會更方便。每個JSX元素都簡單地調(diào)用createElement的React Syntax sugar（component，props，…children）。因此，使用JSX可以做的任何事情都可以用純JavaScript完成。

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}
ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);

如果想了解更多JSX轉(zhuǎn)換為JavaScript的示例，可以嘗試使用在線Babel編譯器。組件可以是字符串或React.component的子類。它也可以是正常功能。如果不想鍵入React。createElement，通常會創(chuàng)建一個快捷方式：

const e = React.createElement;
ReactDOM.render(
  e('div', null, 'Hello World'),
  document.getElementById('root')
);

如果使用React，createElement的快捷方式幾乎與使用React而不使用JSX一樣方便。

以上就是React項目使用ES6解決方案及JSX使用示例詳解的詳細內(nèi)容，更多關(guān)于React項目ES6 JSX使用的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

React項目使用ES6解決方案及JSX使用示例詳解

目錄

不使用 ES6

綁定

JSX如何？

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具