黑马React：基础拓展

news2024/11/26 15:25:25

黑马React: D10-基础拓展

Date: December 18, 2023

useReducer

基础使用

作用: 让 React 管理多个相对关联的状态数据

补充：和useState的作用类似，用来管理相对复杂的状态数据

**特点：**useReducer返回值为一个数组, 可以解构处数值state与修改数值的方法dispatch（修改数值的唯一方法）

案例：

  1. 定义一个reducer函数（根据不同的action返回不同的新状态）
  2. 在组件中调用useReducer，并传入reducer函数和状态的初始值
  3. 事件发生时，通过dispatch函数分派一个action对象（通知reducer要返回哪个新状态并渲染UI）
import { useReducer } from 'react'

// 1. 定义reducer函数，根据不同的action返回不同的新状态
function reducer(state, action) {
  switch (action.type) {
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    default:
      return state
  }
}

function App() {
  // 2. 使用useReducer分派action
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <>
      {/* 3. 调用dispatch函数传入action对象 触发reducer函数，分派action操作，使用新状态更新视图 */}
      <button onClick={() => dispatch({ type: 'DEC' })}>-</button>
      {state}
      <button onClick={() => dispatch({ type: 'INC' })}>+</button>
    </>
  )
}

export default App

更新流程

Untitled

分派action传参

**做法：**分派action时如果想要传递参数，需要在action对象中添加一个payload参数，放置状态参数

// 定义reducer

import { useReducer } from 'react'

// 1. 根据不同的action返回不同的新状态
function reducer(state, action) {
  console.log('reducer执行了')
  switch (action.type) {
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    case 'UPDATE':
      return state + action.payload
    default:
      return state
  }
}

function App() {
  // 2. 使用useReducer分派action
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <>
      {/* 3. 调用dispatch函数传入action对象 触发reducer函数，分派action操作，使用新状态更新视图 */}
      <button onClick={() => dispatch({ type: 'DEC' })}>-</button>
      {state}
      <button onClick={() => dispatch({ type: 'INC' })}>+</button>
      <button onClick={() => dispatch({ type: 'UPDATE', payload: 100 })}>
        update to 100
      </button>
    </>
  )
}

export default App

useMemo

**作用：**它在每次重新渲染的时候能够缓存计算的结果

语法：

useMemo(() => {
	// 根据 count1 返回计算的结果
}, [count1])

说明：使用 useMemo 做缓存之后可以保证只有 count1 依赖项发生变化时才会重新计算

**使用场景：**消耗非常大的计算可以使用 useMemo

使用技巧：

1-指这个空数组只会在组件渲染完毕之后执行一次，即只要这个固定的 [1, 2, 3] 稳定的数组引用

const list = useMemo(() => {
	return [1, 2, 3]
}, [])

看个场景

原本用意：想基于count1的变化计算斐波那契数列之和，但是当我们修改count2状态的时候，斐波那契求和函数也会被执行，显然是一种浪费

Untitled

案例：

// useMemo
// 作用：在组件渲染时缓存计算的结果

import { useState } from 'react'

function factorialOf(n) {
  console.log('斐波那契函数执行了')
  return n <= 0 ? 1 : n * factorialOf(n - 1)
}

function App() {
  const [count, setCount] = useState(0)
  // 计算斐波那契之和
  **const sum = factorialOf(count)**

  const [num, setNum] = useState(0)

  return (
    <>
      {sum}
      <button onClick={() => setCount(count + 1)}>+count:{count}</button>
      <button onClick={() => setNum(num + 1)}>+num:{num}</button>
    </>
  )
}

export default App

Res:

Untitled

useMemo缓存计算结果

思路: 只有count发生变化时才重新进行计算

import { useMemo, useState } from 'react'

function fib (n) {
  console.log('计算函数执行了')
  if (n < 3) return 1
  return fib(n - 2) + fib(n - 1)
}

function App() {
  const [count, setCount] = useState(0)
  // 计算斐波那契之和
  // const sum = fib(count)
  // 通过useMemo缓存计算结果，只有count发生变化时才重新计算
  **const sum = useMemo(() => {
    return fib(count)
  }, [count])**

  const [num, setNum] = useState(0)

  return (
    <>
      {sum}
      <button onClick={() => setCount(count + 1)}>+count:{count}</button>
      <button onClick={() => setNum(num + 1)}>+num:{num}</button>
    </>
  )
}

export default App

React.memo

**作用：**允许组件在props没有改变的情况下跳过重新渲染

组件默认的渲染机制

**默认机制：**顶层组件发生重新渲染，这个组件树的子级组件都会被重新渲染

Case1:

效果：点击按钮，数字不断增加，同时不断输出子组件内容。很明显，父组件的改变，子组件也会被跟着重新渲染改变。

import { useState } from "react";

function Son() {
  console.log('我是子组件，我重新渲染了');
  return <div>this is son</div>
}

function App() {
  const [count, setCount] = useState(0)
  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)}>+{count}</button>
    </div>
  )
}

export default App

Res:

Untitled

Case2:

// memo
// 作用：允许组件在props没有改变的情况下跳过重新渲染

import { useState } from 'react'

function Son() {
  console.log('子组件被重新渲染了')
  return <div>this is son</div>
}

function App() {
  const [, forceUpdate] = useState()
  console.log('父组件重新渲染了')
  return (
    <>
      <Son />
      <button onClick={() => forceUpdate(Math.random())}>update</button>
    </>
  )
}

export default App

Res:

Untitled

Case3:

使用 useMemo 来缓存计算结果

import { useState ,memo, useMemo } from "react"

// React.memo props比较机制

// 1. 传递一个简单类型的prop  props变化时组件重新渲染
// 2. 传递一个引用类型的prop  比较的新值和旧值的引用地址是否相同，相同则不重新渲染，不同则重新渲染

const MemoSon = memo(function Son({list}) {
  console.log('子组件重新渲染了')
  return <div>this is Son {list}</div>
})

function App() {
  const [count, setCount] = useState(0)
  const list = useMemo(() => {
    return [1,2,3]
  }, [])
  return (
    <div className="App">
      <MemoSon count={list}></MemoSon>
      <button onClick={() => setCount(count + 1)}>change count</button>
    </div>
  )
}

export default App;

Res:

Untitled

使用React.memo优化

**机制：**只有props发生变化时才重新渲染

下面的子组件通过 memo 进行包裹之后，返回一个新的组件MemoSon, 只有传给MemoSon的props参数发生变化时才会重新渲染

Case:

import { memo, useState } from "react";

function Son() {
  console.log('我是子组件，我重新渲染了');
  return <div>this is son</div>
}

const MemoSon = memo(function Son() {
  console.log('我是子组件，我重新渲染了');
  return <div>this is son</div>
})

function App() {
  const [count, setCount] = useState(0)
  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)}>+{count}</button>
      <MemoSon/>
    </div>
  )
}

export default App

Res:

Untitled

props变化重新渲染

Case:

props变化子组件会重新渲染

import React, { useState } from 'react'

const MemoSon = React.memo(function Son() {
  console.log('子组件被重新渲染了')
  return <div>this is span</div>
})

function App() {
  console.log('父组件重新渲染了')

  const [count, setCount] = useState(0)
  return (
    <>
      <MemoSon count={count} />
      <button onClick={() => setCount(count + 1)}>+{count}</button>
    </>
  )
}

export default App

Res:

Untitled

props的比较机制

对于props的比较，进行的是‘浅比较’，底层使用 Object.is 进行比较，针对于对象数据类型，只会对比俩次的引用是否相等，如果不相等就会重新渲染，React并不关心对象中的具体属性

举个例子：

// prop是简单类型
Object.is(3, 3) => true //没有变化

// prop是引用类型(对象/数组)
Object([], []) => false // 有变化，React只关心引用是否变化

Case1:

传递一个简单数据类型

import { useState ,memo } from "react"

// React.memo props比较机制

// 1. 传递一个简单类型的prop  props变化时组件重新渲染
// 2. 传递一个引用类型的prop  比较的新值和旧值的引用地址是否相同，相同则不重新渲染，不同则重新渲染

const MemoSon = memo(function Son({count}) {
  console.log('子组件重新渲染了')
  return <div>this is Son {count}</div>
})

function App() {
  const [count, setCount] = useState(0)
  const num = 100
  return (
    <div className="App">
      <MemoSon count={num}></MemoSon>
      <button onClick={() => setCount(count + 1)}>change count</button>
    </div>
  )
}

export default App;

Res：

无返回

Case2:

传递一个复杂数据类型list。每次当我们点击 button 按钮的时候，都会引发父组件的重新渲染，从而也会引发 const list= [1, 2, 3] 的重新执行，因为其引用地址也会改变

import { useState ,memo } from "react"

// React.memo props比较机制

// 1. 传递一个简单类型的prop  props变化时组件重新渲染
// 2. 传递一个引用类型的prop  比较的新值和旧值的引用地址是否相同，相同则不重新渲染，不同则重新渲染

const MemoSon = memo(function Son({list}) {
  console.log('子组件重新渲染了')
  return <div>this is Son {list}</div>
})

function App() {
  const [count, setCount] = useState(0)
  const list = [1, 2, 3]
  return (
    <div className="App">
      <MemoSon count={list}></MemoSon>
      <button onClick={() => setCount(count + 1)}>change count</button>
    </div>
  )
}

export default App;

Res:

Untitled

说明：虽然俩次的list状态都是 [1,2,3] , 但是因为组件App俩次渲染生成了不同的对象引用list，所以传给MemoSon组件的props视为不同，子组件就会发生重新渲染

自定义比较函数

如果上一小节的例子，我们不想通过引用来比较，而是完全比较数组的成员是否完全一致，则可以通过自定义比较函数来实现

import React, { useState } from 'react'

// 自定义比较函数
function arePropsEqual(oldProps, newProps) {
  console.log(oldProps, newProps)
  return (
    oldProps.list.length === newProps.list.length &&
    oldProps.list.every((oldItem, index) => {
      const newItem = newProps.list[index]
      console.log(newItem, oldItem)
      return oldItem === newItem
    })
  )
}

const MemoSon = React.memo(function Son() {
  console.log('子组件被重新渲染了')
  return <div>this is span</div>
}, arePropsEqual)

function App() {
  console.log('父组件重新渲染了')
  const [list, setList] = useState([1, 2, 3])
  return (
    <>
      <MemoSon list={list} />
      <button onClick={() => setList([1, 2, 3])}>
        内容一样{JSON.stringify(list)}
      </button>
      <button onClick={() => setList([4, 5, 6])}>
        内容不一样{JSON.stringify(list)}
      </button>
    </>
  )
}

export default App

useCallback

看个场景

上一小节我们说到，当给子组件传递一个引用类型prop的时候，即使我们使用了memo 函数依旧无法阻止子组件的渲染，其实传递prop的时候，往往传递一个回调函数更为常见，比如实现子传父，此时如果想要避免子组件渲染，可以使用 useCallback缓存回调函数

Case:

当我们给子组件传入函数时，由于函数也会引用数据类型，所以即使使用memo进行缓存控制，也会造成 父组件刷新 时，导致子组件同样刷新的问题

import { useState ,memo, useMemo, onChange } from "react"

const Input = memo(function Input({ onChange }) {
  console.log(('子组件重新渲染了'))
  return <input type="text" onChange={(e) => onChange(e.target.value)}></input>
})

function App() {
  // 传给子组件的函数
  const changeHandler = (value) => console.log(value);
  // 触发父组件重新渲染的函数
  const [count, setCount] = useState(0)
  return (
    <div className="App">
      {/* 把函数作为 prop 传递给子组件 */}
      <Input onChange={changeHandler}></Input>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  )
}

export default App;

Res:

当我们不断点击按钮时，数字不断增加的同时，控制台也在不断输出子组件中的语句

Untitled

useCallback缓存函数

**作用：**在组件多次重新渲染的时候缓存函数

语法：

const changeHandler = useCallback((value) => console.log(value), [])

参数：1-需要缓存的函数 2-依赖项

  • 对2的补充说明

    []代表我们只需要将其缓存一次，后面的引用一直保持稳定。如果你想在依赖项变化的时候更新，那就传入一个依赖项即可。

理解：useCallback缓存之后的函数可以在组件渲染时保持引用稳定，也就是返回同一个引用

Case:

// useCallBack

import { memo, useCallback, useState } from 'react'

const MemoSon = memo(function Son() {
  console.log('Son组件渲染了')
  return <div>this is son</div>
})

function App() {
  const [, forceUpate] = useState()
  console.log('父组件重新渲染了')
  const onGetSonMessage = useCallback((message) => {
    console.log(message)
  }, [])

  return (
    <div>
      <MemoSon onGetSonMessage={onGetSonMessage} />
      <button onClick={() => forceUpate(Math.random())}>update</button>
    </div>
  )
}

export default App

Res:

Untitled

forwardRef

**作用：**允许组件使用ref将一个DOM节点暴露给父组件

语法：

const Son = forwardRef((props, ref) => {
	return <input type="text" ref={ref}/>
})

参数：

1-props：指给子组件传递的参数 2-ref：通过ref来绑定子组件，从而在父组件上拿到子组件

Case1:

不使用 forwardRef

import { useRef } from "react"

// 子组件
function Son() {
  return <input />
}

// 父组件
function App() {
  const sonRef = useRef(null)
  const showRef = () => {
    console.log(sonRef);
  }
  return (
    <>
      <Son ref={sonRef} />
      <button onClick={showRef}>focus</button>
    </>
  )
}

export default App

Res:

Untitled

Case2:

通过 ref 获取

import { forwardRef, useRef } from "react"

// 子组件
// function Son() {
//   return <input />
// }

const Son = forwardRef((props, ref) => {
  return <input type="text" ref={ref} />
})

// 父组件
function App() {
  const sonRef = useRef(null)
  const showRef = () => {
    console.log(sonRef);
    sonRef.current.focus()
  }
  return (
    <>
      <Son ref={sonRef} />
      <button onClick={showRef}>focus</button>
    </>
  )
}

export default App

Res:

Untitled

useImperativeHandle

**作用：**如果我们并不想暴露子组件中的DOM而是想暴露子组件内部的方法

语法：

const Input = forwardRef((props, ref) => {
  const inputRef = useRef(null)
  // 实现聚焦逻辑函数
  const focusHandler = () => {
    inputRef.current.focus()
  }
  // 暴露函数给父组件调用
  useImperativeHandle(ref, () => {
    return {
      focusHandler
    }
  })
  return <input type="text" ref={inputRef}/>
})

Case:

import { forwardRef, useImperativeHandle, useRef } from "react"

// 子组件
const Son = forwardRef((props, ref) => {
  const inputRef = useRef(null)
  // 实现聚焦逻辑函数
  const focusHandler = () => {
    inputRef.current.focus()
  }
  // 暴露函数给父组件调用
  useImperativeHandle(ref, () => {
    return {
      focusHandler
    }
  })
  return <input type="text" ref={inputRef}/>
})

// 父组件
function App() {
  const sonRef = useRef(null)
  const focusHandler = () => {
    console.log(sonRef.current);
    sonRef.current.focusHandler()
  }
  return (
    <>
      <Son ref={sonRef} />
      <button onClick={focusHandler}>focus</button>
    </>
  )
}

export default App

Res:

Untitled

Class API

**概念：**顾名思义，Class API就是使用ES6支持的原生Class API来编写React组件

特点：

1-通过类属性 state 定义状态数据

2-通过 setState 方法来修改状态数据

3-通过 render 来写UI模版（JSX语法一致）

Case:

通过一个简单的 Counter 自增组件看一下组件的基础编写结构：

// class API
import { Component } from 'react'

class Counter extends Component {
  // 状态变量
  state = {
    count: 0,
  }

  // 事件回调
  clickHandler = () => {
    // 修改状态变量 触发UI组件渲染
    this.setState({
      count: this.state.count + 1,
    })
  }

  // UI模版
  render() {
    return <button onClick={this.clickHandler}>+{this.state.count}</button>
  }
}

function App() {
  return (
    <div>
      <Counter />
    </div>
  )
}

export default App

Res:

Untitled

组件生命周期

**概念：**组件从创建到销毁的各个阶段自动执行的函数就是生命周期函数

图示：

Untitled

  1. componentDidMount：组件挂载完毕自动执行 - 异步数据获取
  2. componentWillUnmount: 组件卸载时自动执行 - 清理副作用，比如定时器或者事件绑定

Case:

基础案例：卸载组件

 // Class API 生命周期

import { Component, useState } from "react";

class Son extends Component {
  // 生命周期函数
  // 挂载时：组件渲染完毕执行一次。用于：发送网络请求
  componentDidMount() {
    console.log('组件渲染完毕了，请求发送起来')
  }

  // 卸载时：组件卸载前执行一次。用于：清理副作用
  componentWillUnmount() {
    console.log('组件卸载了')
  }
  render() {
    return <div>SSSon</div>
  }
}

function App() {
  const [show, setShow] = useState(true)
  return (
    <>
      {show && <Son />}
      <button onClick={() => setShow(false)}>unmount</button>
    </>
  )
}

export default App

Res:

Untitled

Case2:

问题：以下Case的son组件在卸载后，其中的 Interval 定时器仍然在继续运行，造成了内存泄漏

// Class API 生命周期

import { Component, useState } from "react";

class Son extends Component {
  // 生命周期函数
  // 挂载时：组件渲染完毕执行一次。用于：发送网络请求
  componentDidMount() {
    console.log('组件渲染完毕了，请求发送起来')
    // 开启定时器
    this.timer = setInterval(() => {
      console.log('定时器执行了')
    }, 1000)
  }

  // 卸载时：组件卸载前执行一次。用于：清理副作用
  componentWillUnmount() {
    console.log('组件卸载了')
  }
  render() {
    return <div>SSSon</div>
  }
}

function App() {
  const [show, setShow] = useState(true)
  return (
    <>
      {show && <Son />}
      <button onClick={() => setShow(false)}>unmount</button>
    </>
  )
}

export default App

Res:

Untitled

修复后：

// Class API 生命周期

import { Component, useState } from "react";

class Son extends Component {
  // 生命周期函数
  // 挂载时：组件渲染完毕执行一次。用于：发送网络请求
  componentDidMount() {
    console.log('组件渲染完毕了，请求发送起来')
    // 开启定时器
    this.timer = setInterval(() => {
      console.log('定时器执行了')
    }, 1000)
  }

  // 卸载时：组件卸载前执行一次。用于：清理副作用
  componentWillUnmount() {
    console.log('组件卸载了')
    // 清除定时器
    **clearInterval(this.timer)**
  }
  render() {
    return <div>SSSon</div>
  }
}

function App() {
  const [show, setShow] = useState(true)
  return (
    <>
      {show && <Son />}
      <button onClick={() => setShow(false)}>unmount</button>
    </>
  )
}

export default App

Res：

Untitled

组件通信

**概念：**类组件和Hooks编写的组件在组件通信的思想上完全一致

分类：

  1. 父传子：通过prop绑定数据
  2. 子传父：通过prop绑定父组件中的函数，子组件调用
  3. 兄弟通信：状态提升，通过父组件做桥接

使用总结：

1-思想保持一致，不管API怎么改变，父子通信的思想是一致的

2-类组件依赖于this

父传子

Case:

// class API
import { Component } from 'react'
// 1. 父传子 直接通过props子组件标签身上绑定父组件中的数据即可

class Son extends Component {
  render() {
    // 使用this.props.msg
    return <div>我是子组件 {this.props.msg}</div>
  }
}

class Parent extends Component {
  state = {
    msg: 'this is parent msg'
  }
  render() {
    return (
      <div>
        <h1>我是父组件</h1>
        <Son msg={this.state.msg}/>
      </div>
    )
  }
}

function App() {
  return (
    <>
      <Parent />
    </>
  )
}

export default App

Res:

Untitled

子传父

Case:

// class API
import { Component } from 'react'

class Son extends Component {
  render() {
    const { msg, onGetSonMsg } = this.props
    return (
      <>
        <div>this is Son, {msg}</div>
        <button onClick={() => onGetSonMsg('this is son msg')}>
          changeMsg
        </button>
      </>
    )
  }
}

class App extends Component {
  // 状态变量
  state = {
    msg: 'this is initail app msg',
  }

  onGetSonMsg = (msg) => {
    this.setState({ msg })
  }

  // UI模版
  render() {
    return (
      <>
        <Son msg={this.state.msg} onGetSonMsg={this.onGetSonMsg} />
      </>
    )
  }
}

export default App

Res:

Untitled

参考：

Component – React 中文文档

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1320875.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【具身智能评估9】Open X-Embodiment: Robotic Learning Datasets and RT-X Models

【具身智能评估9】Open X-Embodiment: Robotic Learning Datasets and RT-X Models

论文标题&#xff1a;Open X-Embodiment: Robotic Learning Datasets and RT-X Models 论文作者&#xff1a;– 论文原文&#xff1a;https://arxiv.org/abs/2310.08864 论文出处&#xff1a;– 论文被引&#xff1a;–&#xff08;12/18/2023&#xff09; 论文代码&#xff1a…
阅读更多...
力扣日记12.18-【二叉树篇】合并二叉树

力扣日记12.18-【二叉树篇】合并二叉树

力扣日记&#xff1a;【二叉树篇】合并二叉树 日期&#xff1a;2023.12.18 参考&#xff1a;代码随想录、力扣 617. 合并二叉树 题目描述 难度&#xff1a;简单 给你两棵二叉树&#xff1a; root1 和 root2 。 想象一下&#xff0c;当你将其中一棵覆盖到另一棵之上时&#xf…
阅读更多...
公共字段自动填充——后端

公共字段自动填充——后端

场景&#xff1a;当处理一些请求时&#xff0c;会重复的对数据库的某些字段进行赋值&#xff08;如&#xff1a;在插入和更新某个物品时&#xff0c;需要更新该物品的更新时间和更新者的信息&#xff09;&#xff0c;这样会导致代码冗余。 如&#xff1a; 思路&#xff1a; 自…
阅读更多...
Arma3/武装突袭3东风战役最后一关游戏无法保存的解决办法

Arma3/武装突袭3东风战役最后一关游戏无法保存的解决办法

Arma3这个游戏玩进去还是非常有可玩性的&#xff0c;可是在玩过了它本体自带的东风系列战役后&#xff0c;在最精髓的最后一关——game over这个关卡&#xff0c;却有个非常头疼的问题。 逃跑其实是非常简单的&#xff0c;但是想要无伤环游全岛确十分困难&#xff0c;因为这关卡…
阅读更多...
探索人工智能中的语言模型：原理、应用与未来发展

探索人工智能中的语言模型：原理、应用与未来发展

导言 语言模型在人工智能领域中扮演着重要的角色&#xff0c;它不仅是自然语言处理的基础&#xff0c;也是许多智能系统的核心。本文将深入研究语言模型的原理、广泛应用以及未来发展趋势。 1. 语言模型的原理 统计语言模型&#xff1a; 基于概率统计的传统语言模型&…
阅读更多...
云原生之深入解析如何在K8S环境中使用Prometheus来监控CoreDNS指标

云原生之深入解析如何在K8S环境中使用Prometheus来监控CoreDNS指标

一、什么是 Kubernetes CoreDNS&#xff1f; CoreDNS 是 Kubernetes 环境的DNS add-on 组件&#xff0c;它是在控制平面节点中运行的组件之一&#xff0c;使其正常运行和响应是 Kubernetes 集群正常运行的关键。DNS 是每个体系结构中最敏感和最重要的服务之一。应用程序、微服…
阅读更多...
redis：六、数据过期删除策略（惰性删除、定期删除）和基于redisson实现的分布式锁（看门狗机制、主从一致性）和面试模板

redis：六、数据过期删除策略（惰性删除、定期删除）和基于redisson实现的分布式锁（看门狗机制、主从一致性）和面试模板

数据过期删除策略 Redis的过期删除策略&#xff1a;惰性删除 定期删除两种策略进行配合使用 惰性删除 惰性删除&#xff1a;设置该key过期时间后&#xff0c;我们不去管它&#xff0c;当需要该key时&#xff0c;我们在检查其是否过期&#xff0c;如果过期&#xff0c;我们就…
阅读更多...
转载： iOS 优雅的处理网络数据

转载： iOS 优雅的处理网络数据

转载&#xff1a; iOS 优雅的处理网络数据 原文链接&#xff1a;https://juejin.cn/post/6952682593372340237 相信大家平时在用 App 的时候, 往往有过这样的体验&#xff0c;那就是加载网络数据等待的时间过于漫长&#xff0c;滚动浏览时伴随着卡顿&#xff0c;甚至在没有网…
阅读更多...
NLP论文阅读记录-ACL 2023 | 10 Best-k Search Algorithm for Neural Text Generation

NLP论文阅读记录-ACL 2023 | 10 Best-k Search Algorithm for Neural Text Generation

文章目录 前言0、论文摘要一、Introduction1.1目标问题1.2相关的尝试1.3本文贡献 二.相关工作2.1优势2.2 挑战 三.本文方法3.1 并行探索3.2 时间衰变3.3堆修剪3.4 模型得分 四 实验效果4.1数据集4.2 对比模型4.3实施细节4.4评估指标4.5 实验结果 五 总结 前言 用于神经文本生成…
阅读更多...
【Transformer】Transformer and BERT（1）

【Transformer】Transformer and BERT（1）

文章目录 TransformerBERT 太…完整了&#xff01;同济大佬唐宇迪博士终于把【Transformer】入门到精通全套课程分享出来了&#xff0c;最新前沿方向 学习笔记 Transformer 无法并行&#xff0c;层数比较少 词向量生成之后&#xff0c;不会变&#xff0c;没有结合语境信息的情…
阅读更多...
Transformer Decoder的输入

Transformer Decoder的输入

大部分引用参考了既安的https://www.zhihu.com/question/337886108/answer/893002189这篇文章&#xff0c;个人认为写的很清晰&#xff0c;此外补充了一些自己的笔记。 弄清楚Decoder的输入输出&#xff0c;关键在于图示三个箭头的位置&#xff1a; 以翻译为例&#xff1a; 输…
阅读更多...
支持向量机（SVM）：高效分类的强大工具

支持向量机（SVM）：高效分类的强大工具

文章目录 前言1. SVM的基本原理1.1 核心思想1.2 支持向量1.3 最大化建模1.4 松弛变量1.5 核函数 2. SVM与逻辑回归的区别和联系2.1 区别2.2 联系 3. SVM的应用领域3.1 图像分类3.2 文本分类3.3 生物信息学3.4 金融领域3.5 医学诊断 4. SVM的优势与挑战4.1 优势4.1.1 非线性分类…
阅读更多...
分布式理论 | RPC | Spring Boot 整合 Dubbo + ZooKeeper

分布式理论 | RPC | Spring Boot 整合 Dubbo + ZooKeeper

一、基础 分布式理论 什么是分布式系统&#xff1f; 在《分布式系统原理与范型》一书中有如下定义&#xff1a;“分布式系统是若干独立计算机的集合&#xff0c;这些计算机对于用户来说就像单个相关系统”&#xff1b; 分布式系统是由一组通过网络进行通信、为了完成共同的…
阅读更多...
【02】GeoScene海图生产环境创建

【02】GeoScene海图生产环境创建

1.1 海图生产环境 GeoScene中的企业级海事制图由中央航海信息系统数据库&#xff08;NIS库&#xff09;来处理&#xff0c;将之前传统桌面产品库&#xff08;PL库&#xff09;产品管理方面的能力已经移植到NIS数据库&#xff0c;以ProductDefinitions、ProductCoverage、Produ…
阅读更多...
主从reactor多线程实现

主从reactor多线程实现

现场模型图片&#xff0c;从网上找的 出于学习的目的实现的&#xff0c;如有不对的地方欢迎留言知道&#xff0c;简单实现了http的请求&#xff0c;可通过postman进行访问 启动项目&#xff1a; 返回数据示例 postman请求 附上源码&#xff0c;有问题直接看源码吧
阅读更多...
低代码工作流，在业务场景下启动流程节点绑定的具体步骤与注意事项

低代码工作流，在业务场景下启动流程节点绑定的具体步骤与注意事项

在业务管理的场景下&#xff0c;存在先做了对应的数据管理&#xff0c;后续增加管理的规范度&#xff0c;“在业务数据变化时发起流程”的需求&#xff0c;那么这种情况下就需要在业务管理&#xff08;列表页、表单&#xff09;中发起流程&#xff0c;让业务模型使用流程配置&a…
阅读更多...
[23] GaussianAvatars: Photorealistic Head Avatars with Rigged 3D Gaussians

[23] GaussianAvatars: Photorealistic Head Avatars with Rigged 3D Gaussians

[paper | proj] 给定FLAME&#xff0c;基于每个三角面片中心初始化一个3D Gaussian&#xff08;3DGS&#xff09;&#xff1b;当FLAME mesh被驱动时&#xff0c;3DGS根据它的父亲三角面片&#xff0c;做平移、旋转和缩放变化&#xff1b;3DGS可以视作mesh上的辐射场&#xff1…
阅读更多...
Python3中_和__的用途和区别

Python3中_和__的用途和区别

目录 一、_&#xff08;下划线&#xff09; 1、临时变量&#xff1a; 2、未使用的变量&#xff1a; 二、__&#xff08;双下划线&#xff09; 1、私有属性&#xff1a; 2、私有方法&#xff1a; 三、__的一些特殊用途。 总结 Python3中的_和__是两个特殊的标识符&#…
阅读更多...
大语言模型加速信创软件 IDE 技术革新

大语言模型加速信创软件 IDE 技术革新

QCon 全球软件开发大会&#xff08;上海站&#xff09;将于 12 月 28-29 日举办&#xff0c;会议特别策划「智能化信创软件 IDE」专题&#xff0c;邀请到华为云开发工具和效率领域首席专家、华为软件开发生产线 CodeArts 首席技术总监王亚伟担任专题出品人&#xff0c;为专题质…
阅读更多...
云原生之深入解析减少Docker镜像大小的优化技巧

云原生之深入解析减少Docker镜像大小的优化技巧

一、什么是 Docker&#xff1f; Docker 是一种容器引擎&#xff0c;可以在容器内运行一段代码&#xff0c;Docker 镜像是在任何地方运行应用程序而无需担心应用程序依赖性的方式。要构建镜像&#xff0c;docker 使用一个名为 Dockerfile 的文件&#xff0c;Dockerfile 是一个包…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023