React基础

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>
      <Avatar
        size={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.Provider
        value={{
          theme,
          onReset,
          // ...
        }}
      >
        {/* 默认颜色： #1677FF */}
        <input
          className="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>
  )
}

10.react hooks解释和使用规则：