“这是我参与更文挑战的第2天，活动详情查看： 更文挑战”
前言
Vue提供了一些列的指令，帮助我们快速开发组件，如最常用的v-model、v-show、v-if、v-for，这些指令的功能在React中是如何提供的。
1、React中的v-model
在Vue中的v-model的作用是实现数据双向绑定。这里要特别注意，Vue和React都是单向数据流的，数据双向绑定和数据流是两个独立的概念。
因为在Vue中v-model只能在表单元素<input>、<textarea>、<select>和组件Components上使用，故分表单元素和组件两种使用场景来介绍React中的v-model。
1.1 表单元素的v-model
在React中是用受控组件的概念来实现表单元素上的v-model。
那什么是受控组件呢？我是这么理解的。在表单元素<input>、<textarea> 和 <select>中通常是自己维护数据，并根据用户输入来更新数据。假如我们用React的state来替换这个数据会怎样呢？例如：
import React from 'react';
export default class Input extends React.Component {
constructor(props) {
super(props);
this.state={
value:'请输入内容',
}
}
render() {
return (
<input type="text" value={this.state.value}/>
);
}
}
会发现Input输入框无法输入内容了，这是因为<input/>标签的value属性是可读写的，当我们在Input输入框输入内容时其实是在改变value的值。
这是因为this.state.value在React类组件中只能通过this.setState()来修改。那么在<input/>标签的value属性被this.state.value赋值后，在Input输入框输入内容时，js内部无法修改this.state.value，导致无法修改value的值，从而造成Input输入框无法输入内容。
相当于Input输入框被this.state.value这个state给控制了，React将这种类型的Input输入框称为受控组件。
那如何恢复Input输入框的输入功能呢？这要借助React的合成事件onChange来监听Input输入框的输入，获取输入值，再用this.setState()来把输入值赋值给this.state.value，间接来改变value的值。
import React from 'react';
export default class Input extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '请输入内容',
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({ value: e.target.value });
}
render() {
return (
<>
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
<span>{this.state.value}</span>
</>
);
}
}
this.state.value和Input输入框绑定在一起，随着Input输入框输入内容的改变，this.state.value也会跟着改变，当this.state.value改变时，Input输入框的内容也会改变，这就是数据双向绑定。
以上实现的是不是和v-modle的功能一模一样。下面来看一下函数组件如何实现v-modle。
import { useState } from "react";
export default function Index() {
const [value, setValue] = useState('请输入内容');
const handleChange = (e) => {
setValue(e.target.value)
}
return (
<>
<input type="text" value={value} onChange={handleChange} />
<span>{value}</span>
</>
);
}
1.2 React组件的v-model
Vue组件的v-model是个语法糖，本质上是利用名为value的prop和名为input的事件。
例如在组件上使用v-model="info"时，其实是把info数据传递给value，当info数据改变时组件的value也跟着改变。
双向数据绑定要求组件的value改变时info数据也得跟着改变，可以在组件的value改变时执行this.$emit('input',data)，触发名为 input 的事件，该事件绑定函数(data) => { this.info = data}，其中data是value改变后的值，执行后就实现了双向数据绑定。
那么在React中也可以按这个思路来实现v-model。
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<>
<div>{this.props.value}</div>
<button
onClick={this.props.onChange.bind(this, '子组件改变info的值')}
>
子组件改变info的值
</button>
</>
);
}
}
import React from 'react';
import HelloWorld from './HelloWorld';
export default class Input extends React.Component {
constructor(props) {
super(props);
this.state = {
info: '父组件改变info的值',
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(data) {
this.setState({ info: data });
}
render() {
return (
<>
<button
onClick={() =>{this.setState({info:'父组件改变info的值'})}}
>
父组件改变info的值
</button>
<HelloWorld
value={this.state.info}
onChange={this.handleChange}
>
</HelloWorld>
</>
);
}
}
函数组件的写法：
export default function HelloWorld(props) {
const { value, onChange } = props
return (
<>
<div>{value}</div>
<button
onClick={() => { onChange('子组件改变info的值') }}
>
子组件改变info的值
</button>
</>
);
}
import { useState } from 'react';
import HelloWorld from './HelloWorld';
export default function Input() {
const [info, setInfo] = useState('父组件改变info的值');
const handleChange = (data) => {
setInfo(data)
}
return (
<>
<button
onClick={() => { setInfo('父组件改变info的值') }}
>
父组件改变info的值
</button>
<HelloWorld
value={info}
onChange={handleChange}
>
</HelloWorld>
</>
);
}
2、React中的v-show
Vue的v-show本质是设置所添加指令的元素的css属性display的值，当v-show="true"时，把display设为block，当v-show='false'设为none。
React中这样实现v-show，分类组件和函数组件来介绍。
类组件的写法：
import React from 'react';
export default class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
show: true
}
}
render() {
return (
<div
style={{ 'display': this.state.show ? 'block' : 'none' }}
>
hello world
</div>
);
}
}
函数组件的写法：
import { useState } from "react";
export default function Index() {
const [show, setShow] = useState(false);
return (
<div
style={{ 'display': show ? 'block' : 'none' }}
>
hello world
</div>
)
}
React中实现的v-show比Vue中更灵活，假如元素的css属性display的值为flex，使用v-show会导致样式错乱，而在React可以这样解决。
<div
style={{ 'display': show ? 'flex' : 'none' }}
>
hello world
</div>
3、React中的v-if和v-else
Vue中用v-if和v-else来控制元素是否被渲染。
在JSX语法中，JavaScript 表达式可以被包裹在{}中作为子元素，另外函数也可以被包裹在{}中作为子元素，该函数执行后必须返回React元素。同时在JSX语法中false、null、undefined、true 是合法的子元素，但它们并不会被渲染，故可以依据此特性来决定是否要渲染其他的 React 元素，来实现React中的v-if和v-else。
类组件的写法：
- 用JavaScript表达式包裹在
{}中来实现：
import React from 'react';
export default class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
show: false
}
}
render() {
return (
<React.Fragment>
{this.state.show ? <div>hello world</div> : <div>hello React</div>}
</React.Fragment>
);
}
}
React组件返回的元素和Vue一样必须有个根元素，所以用<React.Fragment>来包裹，<React.Fragment>不会在DOM中渲染出额外的元素，跟Vue中的<template>元素一样。
- 用函数包裹在
{}中来实现：
import React from 'react';
export default class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
show: false
}
}
render() {
return (
<React.Fragment>
{
(() => {
if (this.state.show) {
return (
<div>hello world</div>
)
} else {
return (
<div>hello world</div>
)
}
})()
}
</React.Fragment>
);
}
}
函数组件的写法：
- 用JavaScript表达式包裹在
{}中来实现：
import { useState } from "react";
export default function Index() {
const [show, setShow] = useState(false);
return (
<>
{show ? <div>hello world</div> : <div>hello React</div>}
</>
)
}
其中<></>相当<React.Fragment></React.Fragment>。
- 用函数包裹在
{}中来实现：
import { useState } from "react";
export default function Index() {
const [show, setShow] = useState(false);
const Title = () => {
if (show) {
return (
<div>hello world</div>
)
} else {
return (
<div>hello React</div>
)
}
}
return (
<>
{Title()}
</>
)
}
4、React中的v-for
在Vue中用v-for来渲染列表形式的组件，在Reacr中可以用map()函数来实现，但是要注意在map()方法中的元素需要设置key属性，否值会引起警告错误。
类组件的写法：
import React from 'react';
export default class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
list: ['小明', '小红', '小东']
}
}
render() {
return (
<React.Fragment>
{this.state.list.map((item, index) => {
return (
<div key={index}>{item}</div>
)
})}
</React.Fragment>
);
}
}
当数组类型的数据中每一项没有唯一性id的时候，可以使用索引index作为key，如果数据的顺序可能会变化，不要使用索引index作为key，因为这样做会导致性能变差，还可能引起组件状态的问题，此时可以要求服务端给每项数据添加一个唯一值key，或者用随机数作为key。
函数组件的写法：
import { useState } from "react";
export default function Index() {
const [list, setList] = useState(['小明', '小红', '小东']);
return (
<>
{list.map((item, index) => {
return (
<div key={index}>{item}</div>
)
})}
</>
)
}
小结
本文介绍了Vue开发中常用的指令在React中是如何实现的。读完本文，你应该会按原先用Vue开发一些复杂组件的UI界面及UI交互的思路去用React来开发一些复杂组件的UI界面及UI交互。然而组件的业务交互一般是在组件的生命周期钩子函数中去处理的，比如从服务端请求数据等等。所以下一篇文章将介绍React组件的生命周期。
