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 = <h1>Hello, {name}</h1>;2、函数组件：通过函数的形式，实现组件的封装和简单的逻辑处理。
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}3、自动渲染：当元素的状态发生改变时，React 会自动更新相应的部分，以实现实时的变化。
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
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 (
<button onClick={this.handleClick}>//或者此处直接this.handleClick.bind(this)
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);class LoggingButton extends React.Component {
handleClick = () => { //方法二 定义时使用箭头函数
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
return (
<button onClick={() => this.handleClick()}> //方法三 调用时使用箭头函数
Click me
</button>
);
}
}5、有状态组件和无状态组件：无状态组件即静态组件，内容不会发生变化。而有状态组件则是通过 state 实现变化和控制。比如下面这个例子，可以通过一个有状态组件来控制显示哪一个无状态组件。
function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}
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
? <LogoutButton onClick={this.handleLogoutClick} />
: <LoginButton onClick={this.handleLoginClick} />
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);6、巧用 && 与运算符：通过与运算符，可以很容易地实现一个单条件的 if 。
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}7、简单的遍历：map
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number,index) =>
<li key={index}>
{number}
</li>
);8、自定义组件：React 支持自定义组件，和普通标签的区别就是首字母大写和驼峰式命名。自定义的组件还分函数型和 class 型，区别是函数式一般用作无逻辑或简单逻辑的纯组件，而 class 型用作复杂的带状态的组件。
//函数式
function MyComponent(){
return (
<div>我自定义的组件</div>
)
}
//class式
class MyComponentextends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>我自定义的组件</div>
);
}
}9、直接添加style：如果你想要直接在元素上通过 style 添加样式，需要用双重的大括号，这是因为在 JSX 中，直接添加到 DOM 上的 style 是通过 JSON 的形式的，所以需要多一个 {}，而且写法也与 CSS 不同，需要用驼峰式写法，如 CSS 中的 margin-top 需要改写为 marginTop，且属性值需要以字符串的形式表示。
<div style={
{color:'pink',fontSize:'30px',border:'1px #666 solid'}}>
Hello World!
</div>
//等同于
const style={
color:'pink',
fontSize:'30px',
border:'1px #666 solid',
};
<div style={style}>
Hello World!
</div>关于 JSX 的内容就简单讲到这里了，大部分都只是简单地提了一下，还有很多东西还是需要自己在实践中慢慢摸索学习！
