Context

发表于 2023-03-27 分类于 React 本文字数： 676 阅读时长 ≈ 1 分钟

提供者与消费者模式

用于组孙组件通讯的场景

import { useState, createContext, useContext } from 'react'
// createContext使用方式
const context = createContext()		//createContext可以提供默认值，只有在没有 Provider时生效
const 
// 祖先组件提供数据 关键字： Provider
function parent() {
    return(
    	<context.Provider
            value={{
            color,
            setColor,
            }}
        >
        ...
        </context.Provider>
    )
}


// 后代组件消费
// 1.使用 Consumer
function Child() {
    return(
    	<context.Consumer>
            {/*以函数传参形式消费*/}
            { value => ... }
        </context.Consumer>
    )
}

// 2. 使用 useContext
function Child() {
    const value = useContext(context)
    return() {
        {value.xxx}...
    }
}

Ref

发表于 2023-03-19 更新于 2023-04-07 分类于 React 本文字数： 1.3k 阅读时长 ≈ 1 分钟

Ref

React 支持一个特殊的、可以附加到任何组件上的 ref 属性。此属性可以是一个由 React.createRef() 函数创建的对象、或者一个回调函数、或者一个字符串（遗留 API）。当 ref 属性是一个回调函数时，此函数会（根据元素的类型）接收底层 DOM 元素或 class 实例作为其参数。这能够让你直接访问 DOM 元素或组件实例。

谨慎使用 ref。如果你发现自己经常使用 ref 来在应用中“实现想要的功能”，你可以考虑去了解一下自上而下的数据流(状态提升)。

useRef hook的作用：

1.配合ref属性，获取DOM对象，进行DOM操作
2.在组件更新期间维持一个值（也就是：可以在每次组件重新渲染时，拿到同一个值）

useRef hook 创建的ref对象，有以下特点：

1.ref对象有一个current属性，可以使用该属性存储任意值
2.修改ref对象current属性的值不会导致组件重新渲染

类式组件使用Ref

// React.createRef
export default class MyComponent extends React.Component {
  inputRef = React.createRef()
  componentDidMount() {
    this.inputRef.current.focus();		//直接访问DOM元素的属性
  }
  render() {
    return <input type="text" ref={this.inputRef} />;	
  }

  
}

// 回调
export default class App extends React.Component {
  componentDidMount() {
    this.inputRef.focus()
  }
  render() {
    return (
      <input type="text" ref={(currentNode) => (this.inputRef = currentNode)} />	//往实例对象自身挂载
    )
  }
}

函数式组件使用Ref

//useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在。
import { useEffect, useRef } from 'react'
const App = () => {
  const inputRef = useRef(null)
  useEffect(() => {
    inputRef.current.focus()
  }, [])
  return (
    <div>
      <input type="text" ref={inputRef} />
    </div>
  )
}
export default App

CSS常见问题

发表于 2023-03-16 分类于 CSS 本文字数： 343 阅读时长 ≈ 1 分钟

img图片下方出现缝隙

img是一种类似text的标签元素，在结束的时候，会在末尾加上一个空白符(匿名文本)，导致下方会多出来3px间距
方法一：

1
2
3

img {
	vertical-align: middle;
}

方法二：

img {
	display: block;
}
// img设置为块级元素，text-align:center就不再生效，图片的水平居中应使用margin:auto

position:fixed遮挡问题

fixed是相对于浏览器窗口的固定定位，它的位置与文档流无关，因此不占据文档流空间
很多时候，开启了fixed的组件的z-index层级都很高，如固定在底部的TabBar，此时会出现遮挡底部组件的问题。给被遮挡的组件增加padding值就行。

React路由

发表于 2023-03-14 更新于 2023-04-01 分类于 React 本文字数： 4.5k 阅读时长 ≈ 4 分钟

使用Link,NavLink方式创建路由

{/* 路由链接，Link和NavLink最终会被转为<a>标签 to被转为href*/}
<NavLink to="login">登录</NavLink>
<NavLink to="register">注册</NavLink>
<NavLink to="home">主页</NavLink>
<NavLink to="mine">我的</NavLink>

{/* 注册路由，展示对应的路由组件，"/" 可省略 */}
<Routes>
    <Route path="/Login" element={<Login />}></Route>
    <Route path="/Register" element={<Register />}></Route>
    <Route path="/Home/*" element={<Home />}></Route>		{/* 有二级路由用 "/*"模糊匹配 */}
    <Route path="/Mine" element={<Mine />}></Route>
    <Route path="/" element={<Navigate to="/home" />}></Route>		{/* 作用：只要<Navigate>组件被渲染，就会修改路径，切换视图 */}
</Routes>

使用路由表集中管理注册路由

react-router-dom version6支持原生路由表

// 创建routes目录，一般在src目录下创建
{/* 在routes.js下导入所有路由组件 */}
import { Navigate } from 'react-router-dom'
import Home from '../pages/Home'
import Login from '../pages/Login'
import Register from '../pages/Register'
import Mine from '../pages/Mine'
// 子路由
import Detail from '../pages/Home/Detail'
// 路由表，[{path:'...',element:</>,children:[{...}]},{...}]
export const routes = [
  {
    path:'/Home/*',
    element: <Home />,
    children:[
      {
        path:'Detail',
        element: <Detail />
      },
    ]
  },
  {
    path:'/Login',
    element: <Login />
  },
  {
    path:'/Register',
    element: <Register />
  },
  {
    path:'/Mine',
    element: <Mine />
  },
  {
    path:'/',
    element: <Navigate to="/Home" />
  },
]

// 在对应路由文件中引入钩子函数 useRoutes、引入路由表文件
import { useRoutes } from 'react-router-dom'
import {routes}  from './routes'
const App = () => {
  const element = useRoutes(routes)
  return(
  	<NavLink to="login">登录</NavLink>
    <NavLink to="register">注册</NavLink>
    <NavLink to="home">主页</NavLink>
    <NavLink to="mine">我的</NavLink>
	{/* before */}
	<Routes>
        <Route path="/Login" element={<Login />}></Route>
        <Route path="/Register" element={<Register />}></Route>
        <Route path="/Home/*" element={<Home />}></Route>		{/* 有二级路由用 "/*"模糊匹配 */}
        <Route path="/Mine" element={<Mine />}></Route>
        <Route path="/" element={<Navigate to="/home" />}></Route>
    </Routes>
	{/* after */}
	{element}		// 等同于<Routes><Route></Route></Routes>
  )
}
// 如示例代码中在路由组件<Home/>中有二级路由<Detail/>，那么在<Home/>组件中引入 Outlet
// home.js
import React from 'react'
import { NavLink,Outlet } from 'react-router-dom'
const Home = () => {
  return (
    <>
      <div>主页</div>
      <br />
      <NavLink to="detail">详情</NavLink>
      <Outlet />	// 和 {element} 相似
    </>
  )
}
export default Home

编程式路由导航

使用Link或NavLink方式跳转路由有很多的局限性，如在3秒后路由自动跳转，鼠标滑过图片路由跳转，这些用Link很难实现路由跳转。于是就有了编程式路由导航，不使用Link或NavLink就是编程式路由导航。

函数式

RouterV6版本使用useNavigate()进行编程式路由导航，useNavigate的作用就是返回一个函数

// 引入 useNavigate
import {useNavigate} from 'react-router-dom'
const App = () => {
  const element = useRoutes(routes)		// 路由表
  const navigate = useNavigate()		// 返回一个函数
  const handle = () => {
    // 第一种方式，指定具体的路径
    navigate('/login',{				// 调用函数，参数1--->要跳转的路由路径
      replace:false,				// 参数2[可选]--->replace，路由跳转模式,默认push模式，有痕迹，replace模式，true时无痕迹
      state:{a:1,b:2}				// 向路由组件传递state参数，示例中就向<login/>传递了参数
    })
    // 第二种方式，传入数值进行前进或后退，类似于5.x中的history.go()方法
    // navigate(-1)
  }
  return (
    <div>
      <button onClick={handle}>按钮</button>
    </div>
  )
}

RouterV5.1.0以上版本使用useHistory进行编程式路由导航

import { useHistory } from 'react-router-dom'
export default function App() {
	const history = useHistory()
	
	return(
		...
		<xxx 
        	onClick={(e) => {
        		history.push(e.key)
        	}}
        />
	)
}

类式

借助this.props.history中的属性也能实现路由跳转

Effect几种使用方式

发表于 2023-03-12 更新于 2023-03-15 分类于 React 本文字数： 2.9k 阅读时长 ≈ 3 分钟

使用 Effect Hook

Effect Hook 可以让你在函数组件中执行副作用操作，什么是副作用:有时候，我们只想在 React 更新 DOM 之后运行一些额外的代码。比如发送网络请求，手动变更 DOM，记录日志，这些都是常见的无需清除的副作用。还有一些副作用是需要清除的。例如订阅外部数据源。这种情况下，清除工作是非常重要的，可以防止引起内存泄露！

class中的钩子函数

componentDidMount()
// componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。
componentDidUpdate()
// componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。
componentWillUnmount()
// componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。
// componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。

使用方式1

import { useEffect, useState } from 'react'
const Count = () => {
  const [count, setCount] = useState(0)
  const addCount = () => {
    setCount((pre) => pre + 1)
  }
  // 写法1
  useEffect(() => {
    console.log('useEffect钩子函数执行')
  })
  // 相当于调用componentDidMount() + componentDidUpdate()
  return (
    <div>
      <div>{count}</div>
      <button onClick={addCount}>+1</button>
    </div>
  )
}

使用方式2

import { useEffect, useState } from 'react'
const Count = () => {
  const [count, setCount] = useState(0)
  const addCount = () => {
    setCount((pre) => pre + 1)
  }
  // 写法2
  useEffect(() => {
    console.log('useEffect钩子函数执行')
  },[])
  // 相当于调用componentDidMount()
  return (
    <div>
      <div>{count}</div>
      <button onClick={addCount}>+1</button>
    </div>
  )
}
export default Count

使用方式3

import { useEffect, useState } from 'react'
const Count = () => {
  const [count, setCount] = useState(0)
  const addCount = () => {
    setCount((pre) => pre + 1)
  }
  // 写法3
  useEffect(() => {
    console.log('useEffect钩子函数执行')
  },[count])
  // 相当于调用componentDidMount() + componentDidUpdate()，
  // 注意componentDidUpdate()被调用是有条件的，只有数组中的 count 更新时才会更新
  return (
    <div>
      <div>{count}</div>
      <button onClick={addCount}>+1</button>
    </div>
  )
}
export default Count

使用方式4

useEffect(() => {
    function handleStatusChange(status) {
        setIsOnline(status.isOnline)
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange)
    // Specify how to clean up after this effect:
    return function cleanup() {
        ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange)
    }
})
// 相当于调用componentDidMount() + componentWillUnmount()，

useEffect应用-发送请求

在组件中，可以使用useEffect Hook来发送请求(side effect)获取数据
注意：effect只能时一个同步函数，不能使用async
因为如果effect时async的，此时返回值时Promise对象。这样的话，就无法保证函数被立即调用
为了使用async/awair语法，可以在effect内部创建async函数，并调用
核心代码：

// 错误演示：不要给effect添加async
useEffect(async() => {
    const res = await axios.get('http://xxx')
},[])
// 正确使用
useEffect(() => {
    const loadData = async () => {
        const res = await axios.get('http://xxx')
    }
    loadData()
},[])

消息订阅发布：pubsub-js

发表于 2023-03-10 分类于 React 本文字数： 416 阅读时长 ≈ 1 分钟

pubsub-js

pubsub-js使用消息订阅发布机制用于组件之间传递数据，
理解订阅发布机制

订阅发布

// 导入包
npm i pubsub-js
or
yarn add pubsub-js

import PubSub from 'pubsub-js'

// A组件发布
// PubSub.publish('约定的主题', 要传的数据);
PubSub.publish('MY TOPIC', data)

// B组件订阅
// token跟setTimeout赋值同理，在销毁时使用,msg为'MY TOPIC'，用_代替。data是接收到的数据
const token = PubSub.subscribe('MY TOPIC', (msg,data) => {...})

// 销毁订阅
PubSub.unsubscribe(token);

State的注意事项

发表于 2023-03-08 更新于 2023-03-26 分类于 React 本文字数： 995 阅读时长 ≈ 1 分钟

State的注意事项

函数组件中state

// setState方法更新状态是同步的，但是表现为延迟更新状态(注意：非异步更新状态)
// 调用setState时，将所有更新状态对象放在一个react的更新任务队列中暂存起来（没有立即更新），
// 如果多次调用 setState更新状态，状态会进行合并，后面覆盖前面
// 等到所有的操作都执行完毕，React会拿到最终的状态，然后触发组件更新
//优势：多次调用setState()，只会触发一次重新渲染，提升性能
state = {
    count: 0,
}
addCount = () => {
    this.setState({
        count: this.state.count + 1,
    })
    this.setState({
        count: this.state.count + 2,
    })
    this.setState({
        count: this.state.count + 3,
    })
    console.log('count:',this.state.count)		// count:0，只执行了一次
}

render() {
    console.log('render')		//render，只执行一次
    return (
        <>
        <div>{this.state.count}</div>	//3
        <br />
        <button onClick={this.addCount}>按钮</button>
		</>
	)
}
// 如果后面的状态需要依赖前一项状态的值，可以使用箭头函数的形式
// React内部会拿到第一次回调函数的结果，然后把这个最新的状态结果作为参数，传递给下次调用的回调函数
//这样，下一次调用就可以拿到上一次调用的结果（也是上一次更新后的状态值）
this.setState((previousState) => {
    return { count: previousState.count + 1 }
})

JS中的类

发表于 2023-03-03 分类于 JS 本文字数： 1.9k 阅读时长 ≈ 2 分钟

什么是类

类是对象的模板，定义了对象的属性和方法

创建一个类

// 最基本的类
class MyClass {

}
// 创建一个示例对象的类
class MyClass {
    constructor(...argu) {	//实参会被构造函数 constructor 接收
    console.log(argu);  //['孙悟空',18]
    }
}
const a = new MyClass('孙悟空',18)

//通过实例对象属性调用
class MyClass {
    constructor(name,age) {
        this.name = name
        this.age = age
    }
    fn() {
    	console.log('打妖怪');
    }
}
const a = new MyClass('孙悟空',18) 
console.log(a.name,a.age);  //孙悟空 18
a.fn()  //打妖怪

类的this

class MyClass{
    fn() {
        console.log(this);
    }
}
const a = new MyClass
a.fn()  //this--->MyClass {},通过实例对象属性调用函数,this指向实例对象a

const b = a.fn    // 将实例对象a的函数赋值给b
b() //this--->undefined,理论上this应该指向函数的调用者--->window,但在类区域中,默认开启严格模式,所以输出undefined
// 结论：通过实例对象调用函数，this指向该实例对象，通过普通函数调用，this指向undefined

//很多时候我们不希望this的指向变化，最简单的方式是使用箭头函数
class MyClass{
    fn = () => console.log(this)
}
const a = new MyClass
a.fn()  //MyClass {fn: ƒ}
const b = a.fn    
b() //MyClass {fn: ƒ}

类的继承

class Parent{
    constructor(name,age) {
        this.name = name
        this.age = age
    }
    fn = () => {
        console.log('我是父类，子类可以继承我的属性和方法');
    }
}
//extends--->继承
class Chi1 extends Parent{

}
//  子类可以完全继承父类的属性和方法 
const chi1 = new Chi1('我是子类1',18)
console.log(chi1.name,chi1.age);  //我是子类1 18
chi1.fn()   // 我是父类，子类可以继承我的属性和方法

//  子类可以重写父类的属性和方法
class Chi2 extends Parent{
    constructor(name,age,sex) {
        // 继承父类的构造函数
        super(name,age)
        // 自己的属性
        this.sex = sex
    }
    fn = () => {
        console.log('我是子类，我重写了父类中的方法')
    }
}
const chi2 = new Chi2('我是子类2',19,'男')
console.log(chi2.name,chi2.age,chi2.sex)    // 我是子类2 19 男
chi2.fn()   //我是子类，我重写了父类中的方法

类的静态属性和方法

// 直接通过类调用的属性和方法被称为静态属性和静态方法(类属性，类方法)
class MyClass{
    static name = '我是MyClass'
    static fn = () => {
        console.log('我是通过类直接调用的');
    }
}
console.log(MyClass.name);  //我是MyClass
MyClass.fn()    //我是通过类直接调用的