React、Vue我全都要！React|React、Vue我全都要！React Hook 实现 Vue 的11个基本功能
前言
大家好，我是林三心，因为工作项目的需要，在上个月，我开始在项目中使用React去开发，到了今天，差不多一个月了，想跟大家分享一下我在React中是怎么去实现以前Vue中的一些功能的。
由于本菜鸟使用React不久，有不妥之处还请大家之处
注明：本文中所指 Vue 的版本是 Vue2， React 的版本是 React171、JSX和template 在Vue2中是使用
template 的，这点使用 Vue 的同学们都知道，而在 React 中使用的是 JSX ， JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。它有以下优点：
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
JSX 的例子：使用ReactDOM.render函数，将DOM渲染到对应到id为app的节点下// 使用ReactDOM.render函数，将DOM渲染到对应到id为app的节点下
ReactDOM.render(我是林三心
我是菜鸟React是一个很不错的 JavaScript 库!
,
document.getElementById('app')
);
2、React 中给元素设置 style React 使用内联样式。我们可以使用 驼峰法 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：
function Demo() {var myStyle = {
fontSize: 100, // 驼峰法
color: '#FF0000'
}return 林三心是菜鸟
}3、React 中给元素设置 class 由于 JSX 就是 JavaScript，一些标识符像
class 不建议作为 XML 属性名。作为替代，使用 className来做对应的属性。function Demo() {const classes = 'haha heihei xixi'return (林三心是菜鸟 // 单个
林三心是菜鸟 // 多个
林三心是菜鸟 // 使用值来当做class)
}4、React 中的点击事件 在
Vue 中的点击事件使用的是 @click 来触发的，而在 JSX 中使用的是 onClick function Demo() {
const handleClick = () => {
console.log('林三心是菜鸟')
}return (
)
}5、React 中修改值触发DOM更新 我使用的是
React hook 其中的 useState ，这一个hook在修改常量的时候比较简单，但是在修改引用 对象 或者 数组 的时候就需要先进行 浅拷贝 再进行覆盖修改import { useState } from 'react'function Demo() {
const [msg, setMsg] = useState('我是菜鸟')
const [obj, setObj] = useState({
name: '林三心',
food: '泡面'
})
const [arr, setArr] = useState([
{ message: '林三心啊', id: 1 },
{ message: '林三心啊啊', id: 2 },
{ message: '林三心啊啊啊', id: 3 }
])
const handleClick = (type: number) => {
switch (type) {
case 1:
setMsg('林三心是菜鸟') // 直接赋值
break;
case 2:
setObj({ ...obj, food: '牛肉丸', }) // 浅拷贝
break;
case 3:
setArr([...arr, { message: '林三心啊啊啊啊', id: 4}]) // 浅拷贝实现push效果
break;
}
}return (
{msg}{`我是${obj.name}我喜欢吃${obj.food}`}
{
arr.map(({ message, id }) => {
return - {message}
})
}
)
}6、生命周期 使用React的hook——
useEffect import { useState, useEffect } from 'react'
function App() {
const [num, setNum] = useState(1)
const [count, setCount] = useState(1)
useEffect(() => {
console.log('哈哈哈哈')
})
return (
)
}第二个参数不传
useEffect(() => {
console.log('哈哈哈哈')
})当
useEffect 第二个参数不传时， 页面初始 和 数据更新 的时候，第一个参数函数都会执行，所以此时初始页面时会输出一次 哈哈哈哈 ，然后无论你点修改num或者修改count的按钮时，也都会输出 哈哈哈哈 第二个参数传空数组
useEffect(() => {
console.log('哈哈哈哈')
}, [])当
useEffect 第二个参数传 [] 时，那么第一个参数函数只有在 页面初始 的时候才会执行，也就是只执行一次，无论你点修改num或者修改count的按钮，都不会执行这个函数第二个参数传非空数组
// ①
useEffect(() => {
console.log('哈哈哈哈')
}, [num])
// ②
useEffect(() => {
console.log('哈哈哈哈')
}, [count])
// ③
useEffect(() => {
console.log('哈哈哈哈')
}, [num, count])当
useEffect 第二个参数传非空数组时， 页面初始 和 依赖的数据发生更新 的时候，第一个参数函数都会执行。比如上方例子：- ①、只有按修改num按钮时，才会再次输出
哈哈哈哈 - ②、只有按修改count按钮时，才会再次输出
哈哈哈哈 - ③、无论按哪个按钮都会再次输出
哈哈哈哈
useEffect(() => {
const timeId = setTimeout(() => console.log('我是定时器'), 1000)
return () => clearTimeout(timeId)
})React 会在组件卸载的时候执行清除操作。effect 在每次渲染的时候都会执行。React 会在执行当前 effect 之前对上一个 effect 进行清除。
是在还不理解的同学，可以疯狂点击按钮，看看
我是定时器 这句话会输出多遍还是只输出一遍，就恍然大悟了7、React 中实现 v-if & v-else Vue 中的 v-if & v-else
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。林三心是菜鸟也可以用
v-else 添加一个“else 块”：林三心是菜鸟
Oh no React中实现
如果单单只想实现
v-if 的话，可以借助 && 逻辑运算符import { useState } from 'react'
function Demo() {const [show, setShow] = useState(false)
const changeShow = () => {
setShow(!show)
}return ({show && 林三心是菜鸟}
)
}如果想实现
v-if 和 v-else 的话，可以借助 三元运算符 import { useState } from 'react'
function Demo() {const [show, setShow] = useState(false)
const changeShow = () => {
setShow(!show)
}return ({show ? 林三心是菜鸟 : 菜鸟是林三心}
)
}8、React 中实现 v-show Vue 中的 v-show
另一个用于根据条件展示元素的选项是
v-show 指令。用法大致一样：林三心是菜鸟不同的是带有
v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。React中实现
其实就是改变元素的
display 这个样式来实现效果function Demo() {// ...一样的代码return (林三心是菜鸟
)
}9、React 中实现 v-for 我们可以用
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。Vue 中的 v-for
-
{{ item.message }}
React中实现
JSX 允许在模板中插入数组，数组会自动展开所有成员：
function Demo() {const arr = [
林三心啊 ,
林三心啊啊 ,
林三心啊啊啊 ,
]return (
{arr}
)
}但是我大多数情况会使用数组的
map 方法来协助渲染function Demo() {const arr = [
{ message: '林三心啊', id: 1 },
{ message: '林三心啊啊', id: 2 },
{ message: '林三心啊啊啊', id: 3 }
]return (
{
arr.map(({ message, id }) => {
return - {message}
})
}
)
}10、React 中实现 computed Vue 中的 computed
只要
name 或者 food 改变， mag 会更新成相应的值{{msg}}computed: { msg() { return `我是${this.name}，我爱吃${this.food}` } }React中实现
在 React 中需要通过
useMemo 这个 hook 来来实现 computed 的效果import { useState, useMemo } from 'react'
function Demo() {
const [name, setName] = useState('林三心')
const [food, setFood] = useState('泡面')// 实现computed的功能
const msg = useMemo(() => `我是${name}，我爱吃${food}`, [name, food]) // 监听name和food这两个变量const handleClick = (type: number) => {
if (type === 1) {
setName('大菜鸟')
} else if (type === 2) {
setFood('牛肉丸')
}
}return (
{msg})
}11、React 中实现 watch
// useWatch.ts
import { useEffect, useRef } from 'react'type Callback = (prev?: T) => void
interface Config {
immdiate: Boolean
}const useWatch = (data: T, callback: Callback, config: Config = { immdiate: false }) => {
const prev = useRef()
const { immdiate } = config
const inited = useRef(false)
const stop = useRef(false)
useEffect(() => {
const execute = () => callback(prev.current)
if (!stop.current) {
if (!inited.current) {
inited.current = true
immdiate && execute()
} else {
execute()
}
prev.current = data
}
}, [data])return () => stop.current = true
}export default useWatch 使用
import { useState } from 'react'
import useWatch from '/@/hooks/web/useWatch'
function App() {
const [num, setNum] = useState(1)
useWatch(num, (pre) => console.log(pre, num), { immdiate: true })
return ({num}
)
}
结语 今年快结束了，希望大家身体健康，万事如意
【React、Vue我全都要！React|React、Vue我全都要！React Hook 实现 Vue 的11个基本功能】我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜欢前端，想学习前端，那咱们可以交朋友，一起摸鱼哈哈，或者你有合适的前端岗位机会，可以让我试试的，那可以加我的wx -->
meron857287645 推荐阅读
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- Shell-Bash变量与运算符
- 清明，是追思、是传承、是感恩。
- 牛人进化+|牛人进化+ 按自己的意愿过一生
- vue-cli|vue-cli 3.x vue.config.js 配置
- 七老修复好敏感、角质层薄、红血丝
- 华为旁！大社区、地铁新盘，佳兆业城市广场五期！
- 2020-04-07vue中Axios的封装和API接口的管理
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。