从开始学习React
接触到JSX
,就知道这个JSX
语法就是一个用于简化的代码的方式,React
并没有规定你一定要使用这个,你也可以用React.createElement(component,props,...children)
纯的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.createElement()
写法太麻烦了可以,这样转换
const e = React.createElement;
ReactDOM.render(
e('div', null, 'Hello World'),
document.getElementById('root')
);
就上面这些例子而言,我们可以非常明显看出,JSX
和纯javascript
两者实现同样效果的差异,显然,前者更能够帮助我们简化代码,理清代码的结构和层次,所以,千言万语汇成一句话,请使用JSX
下一篇将讲
React
中的更新