JSX（JavaScript XML）：JSX 是一种 JavaScript 的语法扩展，其表现形式为 JavaScript 与 HTML 的混合使用。JSX 会被 Babel 编译为 JS，且在编译过程中就能够发现错误，所以安全性较高，能够防范部分 XSS 等攻击手段。JSX的执行速度很快，因为它在编译为 JS 代码后进行了优化。JS 和 HTML 混合使用的模式，在熟悉了之后还能够大大提高开发效率和代码可读性。
1、嵌入表达式：将 JS 表达式通过大括号包裹起来使用，比如 {1+2*3}、{user.name}、{getName(name)} 等等所有 JS 语句。通过嵌入表达式的方式，可以在 HTML 中随意编写 JS 语句，通过很简单的代码灵活地实现各种业务。
const name = 'Josh Perez';
const element =
Hello, {name}
;2、函数组件：通过函数的形式，实现组件的封装和简单的逻辑处理。
function getGreeting(user) {
if (user) {
return
Hello, {formatName(user)}!
;}
return
Hello, Stranger.
;}
3、自动渲染：当元素的状态发生改变时，React 会自动更新相应的部分，以实现实时的变化。
function tick() {
const element = (
Hello, world!
It is {new Date().toLocaleTimeString()}.
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
4、绑定this：this 在 React 中是至关重要的，当我们需要在组件上绑定事件监听器，完成特定的交互动作触发事件，以及很多调用组件状态地方都需要注意绑定 this，以免发生 this 指针丢失的问题。解决方法有以下三种。
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);//方法一
}
handleClick() {
this.setState({isToggleOn: !this.state.isToggleOn});
}
render() {
return (
{this.state.isToggleOn ? 'ON' : 'OFF'}
);
}
}
ReactDOM.render(
document.getElementById('root')
);
class LoggingButton extends React.Component {
handleClick = () => { //方法二 定义时使用箭头函数
console.log('this is:', this);
}
render() {
return (
Click me
);
}
}
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
return (
Click me
);
}
}
5、有状态组件和无状态组件：无状态组件即静态组件，内容不会发生变化。而有状态组件则是通过 state 实现变化和控制。比如下面这个例子，可以通过一个有状态组件来控制显示哪一个无状态组件。
function LoginButton(props) {
return (
Login
);
}
function LogoutButton(props) {
return (
Logout
);
}
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button;
{
button = isLoggedIn
?
:
}
return (
{button}
);
}
}
ReactDOM.render(
document.getElementById('root')
);
6、巧用&& 与运算符：通过与运算符，可以很容易地实现一个单条件的 if 。
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
Hello!
{unreadMessages.length > 0 &&
You have {unreadMessages.length} unread messages.
}
);
}
7、简单的遍历：map
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number,index) =>
{number}
);
8、自定义组件：React 支持自定义组件，和普通标签的区别就是首字母大写和驼峰式命名。自定义的组件还分函数型和 class 型，区别是函数式一般用作无逻辑或简单逻辑的纯组件，而 class 型用作复杂的带状态的组件。
//函数式
function MyComponent(){
return (
)
}
//class式
class MyComponentextends React.Component {
constructor(props) {
super(props);
}
render() {
return (
);
}
}
9、直接添加style：如果你想要直接在元素上通过 style 添加样式，需要用双重的大括号，这是因为在 JSX 中，直接添加到 DOM 上的 style 是通过 JSON 的形式的，所以需要多一个 {}，而且写法也与 CSS 不同，需要用驼峰式写法，如 CSS 中的 margin-top 需要改写为 marginTop，且属性值需要以字符串的形式表示。
Hello World!
//等同于
const style={
color:'pink',
fontSize:'30px',
border:'1px #666 solid',
};
Hello World!
关于 JSX 的内容就简单讲到这里了，大部分都只是简单地提了一下，还有很多东西还是需要自己在实践中慢慢摸索学习！
另外，如果你有兴趣，或者是有问题想要与我探讨，欢迎来访问我的博客：https:mu-mu.cn/blog