什么是 JSX
JSX 的全名是 javascript and XML，是一种可拓展的标记性语言。主要特点是声明式和组件化。
声明式
React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。
以声明式编写 UI，可以让你的代码更加可靠，且方便调试。
组件化
创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。
组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。
说明: JSX 是 react 中一项技术，不是全新的语言，js 的扩展
JSX 的具体用法
JSX 最主要的就是组件化，在 JSX 的语法主要提供了 2 中声明组件的方式分别是函数组件和类组件
函数组件
使用函数定义的方式来编写组件
// 函数组件
function App() {
const divTitles = "我是react111";
return (
<div title={divTitles} className="App" tab-index="1">
<h1>Hello world</h1>
</div>
<div>哈哈哈</div>
);
}
类组件
使用 class 关键字来编写组件，使用类组件要继承 React 的 React.Component 方法
// 类组件
import React from 'react';
class App extends React.Component {
render() {
return(
<div className="App">
<h1>Hello world1</h1>
</div>
);
}
}
基本语法
在 JSX 里面 {} 里面会被当成 js 在执行，但是不支持 js 语句，只支持表达式，也不支持对象的写法（在 style 里面可以写）， 属性要用小驼峰的形式写。
标签类型
dom 标签
div、p 等这个不做介绍
自定义标签
自定义标签就是组件，首字母必须大写用来和 Dom 标签做区分
// 定义一个函数组件和写内联样式
function Component1(){
const divTitles = "我是react111";
const divStyles = {
color: 'red',
fontSize: '26px'
};
const porps = {name: 'ccc',age:18};
function handClick() {
console.log('我是吴彦祖');
};
return (
<div style={divStyles} title={divTitles} className="App" tab-index="1">
<h1>Hello world Component1</h1>
<button onClick={handClick}>我是按钮</button>
<User {...porps} />
</div>
);
}
// 使用 Component1
function App() {
const divTitles = "我是react111";
return (
<div>
<Component1 />
</div>
);
}
内联样式
可以使用对象的方式来写
// 定义一个函数组件和写内联样式
function App(){
const divTitles = "我是react111";
const divStyles = {
color: 'red',
fontSize: '26px'
};
return (
<div style={divStyles} title={divTitles} className="App" tab-index="1">
<h1>Hello world</h1>
</div>
);
}
标签属性
标签属性使用小驼峰去写属性名
// 标签属性
function App(){
const divTitles = "我是react111";
return (
<div title={divTitles} className="App" tabIndex="1">
<h1>Hello world</h1>
</div>
);
}
注释
不同于 js 代码中的// 、/**/注释，在 JSX 中大括号包裹的注释
class App extends React.Component {
render() {
return(
<div className="App">
{/* <h1>Hello world1</h1> */}
</div>
);
}
}
拓展运算符的运用
可以使用 posps
function Component1(){
const porps = {name: 'ccc',age:18};
return (
<div className="App" tab-index="1">
<h1>Hello world Component1</h1>
<User {...porps} />
</div>
);
}
// props 的使用
function User(props){
return(
<div>
<h2>我是user组件</h2>
<p>{props.name}---{props.age}</p>
</div>
);
}
组件上的事件
也是要使用小驼峰的写法
function Component1(){
const porps = {name: 'ccc',age:18};
function handClick() {
console.log('我是吴彦祖');
};
return (
<div className="App" tab-index="1">
<h1>Hello world Component1</h1>
<button onClick={handClick}>我是按钮</button>
</div>
);
}
只有一个顶层的 Dom
// 只能有一个顶层 Dom
function App() {
const divTitles = "我是react111";
return (
<div title={divTitles} className="App" tab-index="1">
<h1>Hello world</h1>
</div>
<div></div> // 报错
);
}
可以使用占位符来使用 Fragment 不会报错
// 可以使用占位符来使用 Fragment 不会报错
import React, {Fragment} from 'react';
function App() {
const divTitles = "我是react111";
return (
<Fragment>
<div title={divTitles} className="App" tab-index="1">
<h1>Hello world</h1>
</div>
<div>哈哈哈</div>
</Fragment>
);
}
或者空标签 <></> 包裹，就可以在顶层写多个 Dom
function App() {
const divTitles = "我是react111";
return (
<>
<div title={divTitles} className="App" tab-index="1">
<h1>Hello world</h1>
</div>
<div>哈哈哈</div>
</>
);
}
JSX 原理
React.createElement
主要使用了 React.createElement 创建 Dom
这个是使用 JSX 写的函数组件
function App() {
const divTitles = "我是react111";
return (
<div title={divTitles} className="App" tab-index="1">
<h1>Hello world</h1>
</div>
);
}
使用 React.createElement
// 使用 React.createElement 创建 dom
function App() {
const divTitles = "我是吴彦祖";
const element = React.createElement(
"div",
{title: divTitles,className: 'app', tabIndex: 1},
React.createElement(
"h2",
null,
"hello world"
)
);
return element;
}
网友评论