React入门（三）：常用的JSX

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 (

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>

);

}

function LogoutButton(props) {

return (

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>

{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) =>

{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，且属性值需要以字符串的形式表示。

Hello World!

</div>

//等同于

const style={

color:'pink',

fontSize:'30px',

border:'1px #666 solid',

};

Hello World!

</div>

关于 JSX 的内容就简单讲到这里了，大部分都只是简单地提了一下，还有很多东西还是需要自己在实践中慢慢摸索学习！

另外，如果你有兴趣，或者是有问题想要与我探讨，欢迎来访问我的博客：https:mu-mu.cn/blog