不使用JSX的React

不使用JSX的React

 

JSX对使用React不是必须的。当你不想在你的构建环境中设置编译器，那么不使用JSX的React是非常方便的。

每一个JSX元素都是调用React.createElement(component, props, ...children)的语法糖，因此，任何你使用JSX来做事都可以通过纯JavaScript实现。

例如，下面代码是通过JSX实现的：

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

可以被编译成不使用JSX的代码：

class Hello extends React.Component { render() { return React.createElement('div', null, `Hello ${this.props.toWhat}`); } } ReactDOM.render( React.createElement(Hello, {toWhat: 'World'}, null), document.getElementById('root') ); 

如果你想查看更多JSX如果转化为JavaScript的实例，你可以尝试在线Babel编译器

组件可以通过字符串提供，可以也。通过React.Component的子类提供，或者通过普通函数实现的无状态组件。

如果你厌倦了使用React.createElement，另一个常见的模式是将其赋值给一个缩写：

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

 

转载于:https://www.cnblogs.com/cherryblog/p/7430040.html