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中的更新

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!