携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第4天,点击查看活动详情
什么是JSX?
const element = <h1>Hello, world!</h1>;
JSX就是JavaScript Xml,是一个 JavaScript 的语法扩展,具有 JavaScript 的全部功能。在React中,没有将渲染和逻辑分离,而是存放在一个组件中。是在React内部构建类Xml语法。React也可以不用xml, 但是使用Jsx可以提高组件的可读性。
在JSX中嵌入表达式
用大括号包裹。其中大括号中可以放置有效的js表达式。
const element = <h1>Hello, {name}</h1>;
JSX是一个表达式
编译之后,JSX表达式会转为普通的js函数调用,可以把JSX赋值给变量,当做参数传入。
JSX 语法上更接近 JavaScript 而不是 HTML,所以 React DOM 使用 camelCase
(小驼峰命名)来定义属性的名称,例如:className。
JSX表示对象
Babel 会把 JSX 转译成一个名为 React.createElement()
函数调用。
这两种方式完全一致。
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement()会预先执行一些检查,实际上它创建了一个这样的对象:
// 注意:这是简化过的结构
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
元素
React元素是不可变对象,一旦创建们,无法更改它的子元素或属性,更新 UI 唯一的方式是创建一个全新的元素,并将其传入 root.render()
。
函数组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
class组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
注:组件名称必须以大写字母开头,和标签可以区分开 JSX语法 JSX语法和html语言一样,清晰明了。
<div>
<h1>题目</h1>
<h2>语文</h2>
</div>
创建React对象
// JSX 语法
const el = (<h1>Hello JSX!</h1>)
// 渲染
ReactDOM.render(el, document.querySelector('#root'))
注意点
- react 元素的属性名使用驼峰命名法:tabindex --> tabIndex
- 特殊属性名: class --> className 、for --> htmlFor
- 在 react 中所有的标签都必须闭合,无论是单标签还是双标签
- 推荐:使用小括号包裹 JSX 结构,从而避免 JS 中的自动插入分号陷阱