根据Vue对比来深入学习React 上函数组件 jsx 事件绑定响应式数据条件绑定列表渲染表单绑定

🕗 发布于 2024-10-13 13:14 react.js vue.js 学习前端 javascript

在这里插入图片描述

文章目录

React项目创建

react官网提供了很多生产级的React框架
比如next.js，不过你还得学习next.js框架，
有点冗杂,下面文章会用vite来创建react项目

npx create-next-app@latest

使用create-react-app脚手架
此方法带警告后续可能会删除

npx create-react-app app-name

使用vite创建,后续点React就行

pnpm create vite@latest

React核心库介绍

"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},

React核心库:提供react的各个功能,比如生命周期,状态管理

react-dom:用于与浏览器的 DOM 进行交互提供一些dom操作方法用于把react创建出来的react对象挂载到真正的htmldom中，或者从htmldom中卸载。核心作用类似于vue的mount

//main.ts
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
//严格模式
<StrictMode>
<App />
</StrictMode>
)
//vue3中
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

我们可以看到:React 更加强调函数式编程和 hooks的使用，而 Vue 3 提供了更为直观的模板语法和灵活的 API

React组件

React的组件分类:

函数组件

//组件首字母一定要大写
function Test(){
return <div></div>
}

类组件淘汰了不做过多赘述

import React, { Component } from 'react';

class SimpleCounter extends Component {

render() {

return (

<div>

<div>hello class</div>

</div>

);

}

}
export default SimpleCounter;

jsx

React项目利用babel做了对js的编译，所以我们是可以直接在js里混用jsx的

jsx和js一样，不同点就在于，可以更方便的写html在is里，写在js里的html最后会被编译成一个js对象，我们也可以用react自带createElement创建这个对象

编写jsx代码的本质

使用jsx 一个组件加上尖括号当成html使用
写一段html
不借助jsx，直接用react.createElement方法
react.createElement与vue中h方法类似都是创建生成虚拟 DOM 节点
最后都会转化为React-element对象,让React解析对象，创建成页面。

jsx里面渲染不同内容

字符串,数字都是直接渲染
无法渲染方法
对象只能渲染element对象
布尔值不渲染任何内容
数组把数组里的每一项单独渲染
undefine,null 不渲染任何内容
表达式直接运行

事件绑定

在 React 中，事件处理函数通常是在 JSX 中直接绑定的，并且使用驼峰语法。比如onClick

而Vue中都是通过指令简写@。比如@click

//react
import React from 'react';
const MyComponent = () => {
const handleClick = () => {
console.log('Button clicked!');
};
return (
<button onClick={handleClick}>Click Me</button>
);
};
export default MyComponent;

//vue
<template>
<button @click="increment">Click Me</button>
<p>count</p>
<template>
<script setup>
 const count = ref(0); // 定义方法
  const increment = () => { count.value++; };
<script>

事件绑定其他操作

我们知道在Vue中直接传递参数就行了,那么在react又该怎么做呢？

<template>

<div>

<button @click="handleClick(1, $event)">Click Me</button>

</div>

</template>

  

<script setup>

handleClick(param, event) {

// 1. 传递参数

console.log('Parameter:', param);

  

// 2. 获取事件对象

console.log('Event:', event);

console.log('Target:', event.target); // 事件目标

  

// 3. 阻止默认行为和冒泡

event.preventDefault(); // 阻止默认行为

event.stopPropagation(); // 阻止事件冒泡

// 可以在这里执行其他操作

console.log('Default behavior prevented and event propagation stopped.');

}

</script>

传递参数
方法传递参数时使用箭头函数包裹

const App = () => {

const handleClick = (param) => {

console.log(param);

};
return (

<div>

<button onClick={() => handleClick('Hello, World!')}>

Click Me

</button>

</div>

);

};

获取事件对象

//无参时
const App = () => {

const handleClick = (event) => {

console.log('Event:', event);

console.log('Button clicked:', event.target);

};
return (

<div>

<button onClick={handleClick}>

Click Me

</button>

</div>

);
//有参数时
function App() {

const handleClick = function(a:number,b:number,e:any){

console.log(a,b,e,e.target);

}

return (

<>

<button onClick={(e) => handleClick(1,2,e)}></button>

</>

)

}

export default App

阻止默认行为,冒泡等

import React from 'react';

const App = () => {

const handleSubmit = (event) => {

event.preventDefault(); // 阻止表单提交

console.log('Form submitted');

};

const handleButtonClick = (event) => {

event.stopPropagation(); // 阻止事件冒泡

console.log('Button clicked');

};

  

return (

<form onSubmit={handleSubmit}>

<button onClick={handleButtonClick}>

Submit

</button>

</form>

);

};

export default App;

特别注意

与Vue中的不同给到事件绑定的一定是一个方法,不要直接调用方法，调用方法会使页面初次渲染指向方法

响应式数据

React 不能像 Vue 一样直接修改触发更新
Vue：Vue 使用的是数据代理，当你直接修改数据属性时，Vue 的响应式系统会自动监测到这些变化，并触发视图的更新。这是因为 Vue 在内部使用Object.defineProperty 或 Proxy 来拦截对对象的访问和修改。
React:React 不会自动追踪数据的变化。如果你直接修改组件的状态(如通过直接赋值)React 并不会知道需要重新渲染组件。要触发更新，必须使用 setState()或相应的Hooks 。这是因为 React 采用了声明式编程模型，更新状态后 React 会重新计算出需要渲染的组件

react修改能改值，但无法触发更新，因为react没有像vue一样监听get和set，而是在调用setState或相应的Hooks的时候调用的更新操作

import React, { useState } from 'react';

  

const Counter = () => {

const [count, setCount] = useState(0);

  

return (

<button onClick={() => setCount(count + 1)}>

{count}

</button>

);

};
export default Counter;
//输入框
import React, { useState } from 'react';

  

const TextInput = () => {

const [inputValue, setInputValue] = useState('');

  

const handleChange = (event) => {

setInputValue(event.target.value);

};

  

return (

<div>

<input type="text" value={inputValue} onChange={handleChange} />

<p>You typed: {inputValue}</p>

</div>

);

};


export default TextInput;

浅合并 在开发中常用

const UserForm = () => {

const [formData, setFormData] = useState({

name: '',

age: '',

email: ''

});
// 处理输入变化

const handleChange = (event) => {

const { name, value } = event.target;

// 使用浅合并来更新状态

setFormData((prevData) => ({

...prevData, // 浅合并之前的状态

[name]: value // 更新特定字段

}));

};

`setState` 的特性

合并更新

const handleClick = () => {
 setCount(count + 1); 
 setCount(count + 2); // 只有这次会生效
  };
//最后会为2

触发更新
如果 newValue 等于当前 value，组件依然会重新渲染，这可能会影响性能，尤其是在频繁调用的情况下

const updateValue = (newValue) => { 
setValue(newValue);
 // 即使新值与当前值相同 };

r解决办法: 给个条件判断 使用函数式更新 或者调用useCallbalck和useMemo优化函数和计算值

const MyComponent = () => {

const [count, setCount] = useState(0);

const increment = () => {

const newCount = count + 1;

if (newCount !== count) {

setCount(newCount);

}

};

  

const MyComponent = () => {

const [count, setCount] = useState(0);

const increment = () => {

setCount(prevCount => prevCount + 1); // 返回新的状态，避免直接依赖 count

};

const MyComponent = () => {

const [count, setCount] = useState(0);

const increment = useCallback(() => {

setCount(prevCount => prevCount + 1);

}, []);

避免在render方法中使用
在 render 方法中直接调用 setState 会导致无限循环，因为每次组件渲染都会调用 setState，从而触发新的渲染。这是非常不推荐的做法。正确的方法是在事件处理或生命周期方法中调用 setState。

const MyComponent = () => {
const [count, setCount] = useState(0);
// 不要这样做：
// setCount(count + 1); // 会导致无限循环
return (

<div>

<p>{count}</p>

<button onClick={() => setCount(count + 1)}>Increment</button>

</div>

);
};

在 React 中，使用 setState 来更新数组和对象时，确实需要返回一个新的数组或对象。这是因为 React 使用浅比较来检测状态的变化，如果你直接修改原有的状态对象或数组，React 可能不会意识到这些变化，从而不触发重新渲染

import React, { useState } from 'react';

const MyComponent = () => {

const [state, setState] = useState({ name: 'zhaimou', age: 30 });

const updateName = () => {

setState(prevState => ({

...prevState,

name: 'zhai'

}));

};

return (

<div>

<p>Name: {state.name}</p>

<p>Age: {state.age}</p>

<button onClick={updateName}>Change Name</button>

</div>

);

};

条件渲染

在 Vue 中，条件渲染通常使用 v-if、v-else-if 和 v-else 指令。Vue 的模板语法使得条件渲染更加直观。

在 React 中，通常使用 JavaScript 表达式来进行条件渲染。可以使用 if 语句、三元运算符或者逻辑与（&&）操作符。

import React, { useState } from 'react';

  

const MyComponent = () => {

const [isLoggedIn, setIsLoggedIn] = useState(false);

return (

<div>

{isLoggedIn ? (

<h1>Welcome back!</h1>

) : (

<h1>Please log in.</h1>

)}

<button onClick={() => setIsLoggedIn(!isLoggedIn)}>

Toggle Login

</button>

</div>

);

};

列表循环

在 Vue 中，使用 v-for 指令进行列表渲染。与 React 类似，Vue 也要求每个列表项有一个唯一的 key 属性。

在 React 中，通常使用 map() 方法来遍历数组并生成组件。每个元素需要一个唯一的 key 属性以帮助 React 识别哪些项发生了变化、被添加或删除。

import React from 'react';

const ItemList = ({ items }) => {

return (

<ul>

{items.map((item, index) => (

<li key={item.id}>{item.name}</li> // 使用唯一的 id 作为 key

))}

</ul>

);

};

export default ItemList;

表单绑定

在 Vue 中，表单元素使用 v-model 指令进行双向数据绑定,@submit.prevent阻止默认的提交行为事件修饰符绑定

在 React 中，表单元素通常是“受控组件”，这意味着表单的值由 React 的状态管理。

import React, { useState } from 'react';

  

const MyForm = () => {

const [name, setName] = useState('');

  

// 处理输入框的变化

const handleChange = (event) => {

setName(event.target.value); // 更新状态为输入框的当前值

};

  

// 处理表单提交

const handleSubmit = (event) => {

event.preventDefault(); // 阻止默认的表单提交行为

alert(`提交的名称: ${name}`);

};

return (

<form onSubmit={handleSubmit}>

<label>

名称:

<input type="text" value={name} onChange={handleChange} /> {/* 受控组件 */}

</label>

<button type="submit">提交</button>

</form>

);

};

export default MyForm;

总结

Vue各种效果用指令编写，对于简单的控制非常容易
React各种效果都通过逻辑运算产出对应的内容渲染能够完整控制整个过程更少的封装，更高的自由度

本篇文章到这里就结束了如果对你有所帮助就点个关注吧会持续更新技术文章

原文地址：https://blog.csdn.net/weixin_63625059/article/details/142878344

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：汽车主机厂主数据管理中一物多码或多码一物问题的具体表现有哪些？
下一篇：baby_web-CTFWeb进阶wp-攻防世界14

SpringBoot在高校竞赛平台开发中的优化策略
同时，一个大型的计算机网站系统，必须有一个正确的设计指导思想，通过合理选择数据结构、网络结构、操作系统以及开发环境，构成一个完善的网络体系结构，才能充分发挥计算机信息管理的优势。随着计算机技术的发展以
阅读更多2024-10-14
Springboot+Spring-Security+JWT 实现用户登录和权限认证
Spring Boot 项目初始化：利用 Spring Initializr 创建项目，并添加必要依赖（Spring Web、Spring Security、JWT、JPA 等）。用户登录和注册接口：
阅读更多2024-10-14
QT事件与网络通信
【代码】QT事件与网络通信。
阅读更多2024-10-14
给定任意非空有向图 G，输出 G 中所有 K 顶点的算法，并返回 K 顶点的个数。
给定任意非空有向图 G，输出 G 中所有 K 顶点的算法，并返回 K 顶点的个数。C语言
阅读更多2024-10-14
题目解析：1423. 可获得的最大点数
从数组的两端开始取卡牌。我们可以从数组的开头拿一些卡牌，剩下的从末尾拿。为了找到能够获得的最大点数，尝试不同的取卡顺序，计算所有可能的组合得分。上面的正向思维方法虽然能够解决问题，但效率相对较低。，表
阅读更多2024-10-14
【星汇极客】STM32 HAL库各种模块开发之DHT11模块
本人是一名嵌入式学习者，在大学期间也参加了不少的竞赛并获奖，包括但不限于：江苏省电子设计竞赛省一、睿抗机器人国二、中国高校智能机器人国二、嵌入式设计竞赛国三、光电设计竞赛国三、节能减排竞赛国三。
阅读更多2024-10-14
uniapp、微信小程序、Vue中使用nzh库实现数字转中文大写
本文将详细介绍如何在uniapp、微信小程序和Vue项目中使用nzh库，帮助开发者轻松实现数字转中文大写、中文读数等功能。
阅读更多2024-10-14
Linux中的chmod命令详解
chmod命令是Linux系统中管理文件权限的重要工具。通过掌握其基本和高级用法，我们可以更有效地控制文件的访问权限，从而保护系统的安全性。无论是通过符号模式还是八进制模式，chmod都提供了灵活的方
阅读更多2024-10-14
el-date-picker绑定数据显示比数据库少一天问题解决记录
经过查阅资料，得知问题是因为时区不同步导致的。数据库存储的是UTC时间，而el-date-picker显示的是本地时间。如果数据库服务器和你的应用服务器的时区不一致，或者你直接从数据库取出来的UTC时
阅读更多2024-10-14
springboot自定义starter
配置类是通过无参构造创建出来，在通过set方法属性注入的，所以一定要保证无参构造器和对应set方法存在@Data即使用时要通过如下配置信息设置bean的属性值（yml格式）student:name:
阅读更多2024-10-14

根据Vue对比来深入学习React 上 函数组件 jsx 事件绑定 响应式数据 条件绑定 列表渲染 表单绑定