当前位置：首页 > news >正文

React基础

news 来源：原创 2025/6/23 11:04:10

react是什么？为什么我们要学react呢，react和vue的区别是什么？

1.什么是react？

1.react是一个用来渲染用户界面（UI）的JavaScript库（react完全基于JavaScript，只要有js基础，就可以上手react开发）

2. 响应式原理本质不同：

Vue构建了一套依赖追踪的响应式系统，Vue 2中通过Object.defineProperty劫持数据读写，Vue 3升级为Proxy代理对象。
React则采用基于引用比较的被动检测，状态更新时（通过setState或Hooks）必须生成全新的状态对象

3.虚拟DOM的殊途同归

Vue将响应式系统与虚拟DOM深度耦合
React则依赖算法革新优化更新过程

4. 状态管理方案折射出设计哲学：

Vue的Vuex允许直接修改状态（可变数据）
React的Redux要求返回新状态对象（不可变数据）

语法设计：

Vue以HTML模板为中心
React彻底拥抱JSX语法

2.开发环境搭建：

1.创建项目：npx create-react-app react-demo

2.进入项目：npm start

3.JSX的使用和原理:

3.1.JSX语法：

jsx允许你在js当中写类似HTML的标记，是js的语法扩展

1. 作用：写react页面结构

2. 原理：jsx是js的语法扩展

jsx的三个原则 1.必须有一个根节点 2.所有标签必须闭合 3.标签属性名必须使用驼峰

3.2JSX中{}的应用：

让JSX变成动态的，可以用在标签内容，属性当中

// 使用JSX来实现列表渲染
const categories = [{ id: 1, name: '推荐' },{ id: 2, name: '一人套餐' },{ id: 3, name: '二人套餐' },{ id: 4, name: '三人套餐' },{ id: 5, name: '四人套餐' },
]
root.render(<div><ul>{categories.map((item) => {return <li key={item.id}>{item.name}</li>})}</ul></div>
)

4.事件绑定：

对于有参数没有参数的写法是有一定区分的，没有参数的可以直接写函数名，有参数需要加上箭头函数

root.render(<div// 事件绑定onClick={() => {console.log('点击了')}}className="box"style={{ width: 300, height: 300, backgroundColor: '#ff0000' }}></div>
)

5.组件：

当我们写的项目比较大的时候，需要封装一些组件，那么我们应该如何封装，其实封装非常简单，只需要定义并且导入就行了

// 注意之间的名称要大写
const App = () => {const handleClick = () => {console.log('点击了')}return (<div className="app" onClick={handleClick}><h1>Hello World</h1></div>)
}

6.useState()状态修改：

规则：不要直接修改当前状态的值，应该创建新值，如果没有遵循该规则，会导致报错或组件无法重新渲染 setCount是用来set count的一个方法，如果要修改值，应该在原值上进行修改

实例（对状态进行修改和删除）：

7.dom操作：

使用useRef来进行创建dom对象，然后绑定到元素上

8.组件通信：

8.1父子组件通信：

实例：

//props 是组件的属性，是只读的，不能修改
//可以传递默认值，如果传递了，就使用传递的值，如果没传递，就使用默认值
const Avatar = ({ imgUrl, size = 50 }) => {console.log(imgUrl, size)return <img src={imgUrl} width={size} alt="logo" />
}
const App = () => {return (<div><Avatarsize={100}imgUrl="https://www.baidu.com/img/flexible/logo/pc/result.png"/><Avatar imgUrl="https://www.baidu.com/img/flexible/logo/pc/result.png" /></div>)
}
export default App

非父子组件通信：

需要使用一个文件来进行传递

实例：（当改变颜色的时候，下面的内容也会跟着变化）

import { useContext, useState } from 'react'
import { createContext } from 'react'
import './App.scss'// 跨组件通讯 - Context
// 1. 创建 Context 对象
const ThemeContext = createContext()// 2. 划定范围，提供共享数据
// 3. 范围内的组件，获取共享数据// -------------------------侧边栏-----------------------
const Sidebar = () => {return (<div className="sidebar"><Menu /></div>)
}
// -------------------------菜单-----------------------
const Menu = () => {return (<div className="menu"><ul><MenuItem /><MenuItem /></ul></div>)
}
// -------------------------菜单项-----------------------
const MenuItem = () => {// 3. 范围内的组件，获取共享数据const { theme } = useContext(ThemeContext)return <li style={{ color: theme }}>菜单</li>
}// -------------------------右侧内容-----------------------
const Content = () => {const { theme } = useContext(ThemeContext)return (<div className="content"><div className="main" style={{ color: theme }}>-------Context 跨组件通讯-------</div><Footer /></div>)
}
// -------------------------重置主题部分-----------------------
const Footer = () => {const { onReset } = useContext(ThemeContext)return (<div className="footer"><button onClick={onReset}>重置主题</button></div>)
}// -------------------------父组件-----------------------
const App = () => {// 要共享的主题颜色const [theme, setTheme] = useState('#1677FF')// 重置主题的函数const onReset = () => {setTheme('#1677FF')}return (<div className="app">{/* 2. 划定范围，提供共享数据 */}<ThemeContext.Providervalue={{theme,onReset,// ...}}>{/* 默认颜色： #1677FF */}<inputclassName="theme-selector"type="color"value={theme}onChange={(e) => setTheme(e.target.value)}/><div className="main" style={{ display: 'flex' }}>{/* 侧边栏 */}<Sidebar />{/* 右侧内容 */}<Content /></div></ThemeContext.Provider></div>)
}export default App

当这些组件不在一个文件里时，我们需要一个文件作为连接作用来进行组件信息传递（创建一个新文件，将下面内容放在里面）

import { createContext } from 'react'
export const ChannelContext = createContext()

9.useEffect：

在组件生命周期的三个阶段（挂载，更新，卸载），执行网络请求，浏览器API等操作

这些操作，也叫：副作用（side effects）

语法：useEffect(effect函数，依赖项数组)

大家可以一项项测试一番~

const ChatRoom = ({ roomId }) => {console.log('当前房间', roomId)// 挂载useEffect(() => {console.log('挂载', roomId)}, [])// 建立连接useEffect(() => {console.log('建立连接', roomId)}, [roomId])// 断开连接useEffect(() => {return () => {console.log('断开连接', roomId)}}, [])return (<div className="chat-room"><h1>欢迎来到{roomId}的房间</h1></div>)
}