注:转自https://zhuanlan.zhihu.com/p/647975794,非商用,仅用于自我学习
1、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( <div> <h1>我是林三心</h1> <h2>我是菜鸟</h2> <p>React是一个很不错的 JavaScript 库!</p> </div> , document.getElementById('app') );
// 使用ReactDOM.render函数,将DOM渲染到对应到id为app的节点下 ReactDOM.render( <div> <h1>我是林三心</h1> <h2>我是菜鸟</h2> <p>React是一个很不错的 JavaScript 库!</p> </div> , document.getElementById('app') );
2、React 中给元素设置 style
React 使用内联样式。我们可以使用 驼峰法 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式:
function Demo() { var myStyle = { fontSize: 100, // 驼峰法 color: '#FF0000' } return <h1 style={myStyle}>林三心是菜鸟</h1> }
3、React 中给元素设置 class
由于 JSX 就是 JavaScript,一些标识符像 class
不建议作为 XML 属性名。作为替代,使用 className
来做对应的属性。
function Demo() { const classes = 'haha heihei xixi' return ( <div> <h1 className='haha'>林三心是菜鸟</h1> // 单个 <h1 className='haha heihei'>林三心是菜鸟</h1> // 多个 <h1 className={classes}>林三心是菜鸟</h1> // 使用值来当做class </div> ) }
4、React 中的点击事件
在Vue
中的点击事件使用的是@click
来触发的,而在JSX
中使用的是onClick
function Demo() { const handleClick = () => { console.log('林三心是菜鸟') } return ( <button onClick={handleClick}>点我</button> ) }
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 ( <div> <button onClick={() => handleClick(1)}>修改msg</button> <button onClick={() => handleClick(2)}>修改obj的food</button> <button onClick={() => handleClick(3)}>arr添加一项</button> <h1>{msg}</h1> <p>{`我是${obj.name}我喜欢吃${obj.food}`}</p> <ul> { arr.map(({ message, id }) => { return <li key={id}>{message}</li> }) } </ul > </div> ) }
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 (
<div>
<button onClick={() => setNum(num + 1)}>点我修改num</button>
<button onClick={() => setCount(count + 1)}>点我count</button>
</div>
)
}
第二个参数不传
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按钮时,才会再次输出
哈哈哈哈
- ③、无论按哪个按钮都会再次输出
哈哈哈哈
return清除操作
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 值的时候被渲染。
<h1 v-if="show">林三心是菜鸟</h1>
也可以用 v-else
添加一个“else 块”:
<h1 v-if="show">林三心是菜鸟</h1> <h1 v-else>Oh no </h1>
React中实现
如果单单只想实现v-if
的话,可以借助&&
逻辑运算符
import { useState } from 'react'
function Demo() {
const [show, setShow] = useState(false)
const changeShow = () => {
setShow(!show)
}
return (
<div>
{show && <h1>林三心是菜鸟</h1>}
<button onClick={changeShow}>点我</button>
</div>
)
}
如果想实现v-if
和v-else
的话,可以借助三元运算符
import { useState } from 'react'
function Demo() {
const [show, setShow] = useState(false)
const changeShow = () => {
setShow(!show)
}
return (
<div>
{show ? <h1>林三心是菜鸟</h1> : <h1>菜鸟是林三心</h1>}
<button onClick={changeShow}>点我</button>
</div>
)
}
8、React 中实现 v-show
Vue 中的 v-show
另一个用于根据条件展示元素的选项是 v-show
指令。用法大致一样:
<h1 v-show="show">林三心是菜鸟</h1>
不同的是带有 v-show
的元素始终会被渲染并保留在 DOM 中。v-show
只是简单地切换元素的 CSS property display
。
React中实现
其实就是改变元素的display
这个样式来实现效果
function Demo() {
// ...一样的代码
return (
<div>
<h1 style={{display: show ? 'block': 'none'}}>林三心是菜鸟</h1>
<button onClick={changeShow}>点我</button>
</div>
)
}
9、React 中实现 v-for
我们可以用 v-for
指令基于一个数组来渲染一个列表。v-for
指令需要使用 item in items
形式的特殊语法,其中 items
是源数据数组,而 item
则是被迭代的数组元素的别名。
Vue 中的 v-for
<ul>
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
React中实现
JSX 允许在模板中插入数组,数组会自动展开所有成员:
function Demo() {
const arr = [
<li key={1}>林三心啊</li>,
<li key={2}>林三心啊啊</li>,
<li key={3}>林三心啊啊啊</li>,
]
return (
<ul>
{arr}
</ul >
)
}
但是我大多数情况会使用数组的map
方法来协助渲染
function Demo() {
const arr = [
{ message: '林三心啊', id: 1 },
{ message: '林三心啊啊', id: 2 },
{ message: '林三心啊啊啊', id: 3 }
]
return (
<ul>
{
arr.map(({ message, id }) => {
return <li key={id}>{message}</li>
})
}
</ul >
)
}
10、React 中实现 computed
Vue 中的 computed
只要name
或者food
改变,mag
会更新成相应的值
<h1>{{msg}}</h1>
computed: { msg() { return `我是${this.name},我爱吃${this.food}` } }
在 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 (
<div>
<button onClick={() => handleClick(1)}>修改name</button>
<button onClick={() => handleClick(2)}>修改food</button>
<h1>{msg}</h1>
</div>
)
}
11、React 中实现 watch
// useWatch.ts
import { useEffect, useRef } from 'react'
type Callback<T> = (prev?: T) => void
interface Config {
immdiate: Boolean
}
const useWatch = <T>(data: T, callback: Callback<T>, config: Config = { immdiate: false }) => {
const prev = useRef<T>()
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 (
<div>
<div style={{ color: '#fff' }}>{num}</div>
<button onClick={() => setNum(num + 1)}>点我</button>
</div>
)
}
标签:11,Vue,林三心,菜鸟,React,useState,return,const
From: https://www.cnblogs.com/ch-zaizai/p/18186533