不使用 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一样方便。
以上就是React项目使用ES6解决方案及JSX使用示例详解的详细内容,更多关于React项目ES6 JSX使用的资料请关注好代码网其它相关文章!