React学习之进阶非JSX的痛处（十七）

从开始学习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中的更新