React文档(二十)不使用JSX
JSX并不是使用React的一个强制需求。当你不需要在你的构造环境里设置编译那么不使用JSX会很方便。
每一个JSX元素只是调用React.createElement(componnet, props, ...children)的语法糖。因此,JSX能做的事原生js同样也做得到。
举个例子,下面的代码用JSX:
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
}
} ReactDOM.render(
<Hello toWhat="World" />,
document.getElementById('root')
);
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被转变成js,你可以试一试在线Babel编译器。
组件要么被提供为一个字符串,要么是一个React.Component子类,要么是一个无状态组件的函数。
如果你已经厌倦了React.createElement方法,一个普通模式是使用简写:
const e = React.createElement; ReactDOM.render(
e('div', null, 'Hello World'),
document.getElementById('root')
);
如果你对React.createElement使用这种简写,那么不使用JSX语法也一样方便。
React文档(二十)不使用JSX的更多相关文章
- React文档(十四)深入JSX
根本上,JSX只是为React.createElement(component, props, ...children)函数提供语法糖.JSX代码是这样的: <MyButton color=&q ...
- React文档(十二)组合vs继承
React拥有很强大的组合模型,我们建议使用组合来替代继承来重利用组件之间的代码. 在本章节中,我们将讨论一些开发者经常触及继承的问题,并且我们该如何使用组合来解决这些问题. 组合 一些组件事先不知道 ...
- React文档(十六)refs和DOM
Refs 提供了一种方式,用于访问在 render 方法中创建的 DOM 节点或 React 元素. 在标准的React数据流中,props是使得父组件和子组件之间交互的唯一方式.你通过props重新 ...
- React文档(三)介绍JSX
我们先看看这个变量声明: const element = <h1>Hello, world!</h1>; 这个有趣的标签语法既不是字符串也不是HTML. 这种写法叫做JSX,这 ...
- React文档(十九)不使用ES6
通常你会将一个React组件定义成一个普通的js类: class Greeting extends React.Component { render() { return <h1>Hell ...
- React文档(十八)最佳性能
在内部,React使用好几种聪明的技巧去最小化更新UI所需要的DOM操作.对于很多应用来说,使用React会使得构建用户界面非常之快而且不需要做太多专门的性能优化.虽然如此,还是有一些方法可以让你为R ...
- React文档(十五)使用propTypes进行类型检查
注意: React.PropTypes 自 React v15.5 起已弃用.请使用 prop-types 库代替. 随着你的应用的开发,你会使用类型检查的方法来捕获很多bug.对于一些应用,你可以使 ...
- React文档(十)表单
HTML表单元素和 React里的其他DOM元素有些不同,因为它们会保留一些内部的状态.举个例子,这个普通的表单接受唯一的name值: <form> <label> Name: ...
- React文档(十三)思考React
在我们的看来,React是使用js创建大型快速网站应用的首要方法.它在Facebook和Instagram的使用已经为我们展现了它自己. React的一个很好的地方就在于当你创建应用的时候它使你思考如 ...
- React文档(二十四)高阶组件
高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...
随机推荐
- Install rapyuta client on Raspberry Pi
Install rapyuta on client sudo git clone -b master https://github.com/cnsdytzy/-Rapyuta-installation ...
- 清除Windows 10的文件夹浏览痕迹
windows 10有一个功能就是在快速访问时显示“最近访问的文件”,“常用文件”.如果是一台共用电脑,这个功能会经常暴露自己的“行踪”. 可以在“文件夹选项”-“隐私”中去掉勾选,并点击“清除”来清 ...
- P4859 已经没有什么好害怕的了(dp+二项式反演)
P4859 已经没有什么好害怕的了 啥是二项式反演(转) 如果你看不太懂二项式反演(比如我) 那么只需要记住:对于某两个$g(i),f(i)$ ---------------------------- ...
- Eclipse如何导入maven项目,以及配置maven
Eclipse如何导入maven项目,以及配置maven 一.准备工作 1. eclipse,安装了eclipse 2. 一个需要导入的maven项目 3. 下载好了的压缩包apache-maven- ...
- IDEA上的项目托管到码云步骤
IDEA上的项目托管到码云步骤:1.安装Git2.idea上配置Git Setting-Version Control-Git 把git.exe改为安装的Git的执行路径如:D:\Prog ...
- 软考自查:UML建模
UML建模 内容提要 用例图 类图与对象图 顺序图 活动图 状态图 通信图 构件图 用例图 包含关系 扩展关系 泛化关系 类图与对象图 填类名,方法名,属性名 填多重度 填关系 1: ...
- gulp插件实现压缩一个文件夹下不同目录下的js文件(支持es6)
gulp-uglify:压缩js大小,只支持es5 安装: cnpm: cnpm i gulp-uglify -D yarn: yarn add gulp-uglify -D 使用: 代码实现1:压缩 ...
- Autowired(required=true)
问题原因 没有实现类的接口上添加了@Autowired注解 问题解决 删掉@Autowired注解 bug详情 Description: Field userDAO in com.crab.servi ...
- Summary on deep learning framework --- TensorFlow
Summary on deep learning framework --- TensorFlow Updated on 2018-07-22 21:28:11 1. Check failed: s ...
- jQuery的offset、position、scroll,元素尺寸、对象过滤、查找、文档处理
jQuery_offset和position var offset = $('.xxx').offset() console.log(offset.left.,offset.top)xxx相对于页面左 ...