六虎

大型React项目需要使用ES6解决方案以及对JSX的使用【React高级技术】

作者：

前端小智

在

开启生长之旅！这是我参加「日新方案 12 月更文应战」的第15天，点击检查活动概况

不运用 ES6

但是，在纯浏览器端运用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类关键字创立的React组件，组件中的办法遵循与惯例ES6类相同的语法规矩。这意味着这些办法不会主动将其绑定到此组件实例。需求显式调用。在结构函数中绑定（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` 已经绑定至实例，因而我们才能够用它来处理点击事情
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

这意味着，假如运用ES6类关键字创立组件，则在处理事情回调时需求编写更多代码。但关于大型项目，这能够进步运营功率。
假如你认为上面的编写办法很庸俗，你能够测验运用Babel插件类特点，它依然处于试验阶段。

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
  }
  // 正告：这种语法还处于试验性阶段！
  // 在这里运用箭头函数就能够把办法绑定给实例：
  handleClick = () => {
    alert(this.state.message);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

请注意，上述语法仍处于试验阶段，这意味着语法或许随时发生变化，最终或许不会包含在框架标准中。
为了安全起见，能够采用以下三种办法：
在结构函数中绑定办法。
运用箭头函数，例如onClick={（e）=>this.handleClick（e）}。
继续运用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); // 调用 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')
);

假如完全不同的组件具有类似的功能，这将导致“交叉重视”的问题。为了处理这个问题，当运用createReactClass创立React组件时，引入mixin函数将是一个很好的处理方案。
更常见的用法是组件定时更新。这个函数能够很容易地用setInterval（）完成，但需求注意的是，当不再需求它时，应该铲除它以节省内存。React供给了一种生命周期办法，这样就能够知道何时创立或销毁了组件。让我们创立一个简单的mixin，它运用这些办法来供给一个简单setInterval（）函数，该函数将在组件被损坏时主动清理。

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

假如一个组件有多个mixin，并且在这些mixin中界说了相同的生命周期办法（例如，当一个组件被损坏时，几个mixin期望进行一些清理），则将调用这些生命周期办法。当运用mixin时，mixin将首要按照界说的顺序履行，然后调用组件上的相应办法。

JSX如何？

React不强制运用JSX。当不想在构建环境中装备JSX编译时，在React中不运用JSX会更方便。
每个JSX元素都简单地调用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转换为JavaScript的示例，能够测验运用在线Babel编译器。
组件能够是字符串或React.component的子类。它也能够是正常功能。
假如不想键入React。createElement，通常会创立一个快捷方式：

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

假如运用React，createElement的快捷方式几乎与运用React而不运用JSX相同方便。

更多文章