React 基本使用

create-react-app

创建 react 项目的脚手架。

React 基本用法

jsx 语法

变量、表达式

import React from 'react';class JSXBaseDemo extends React.Component {constructor(props) {super(props);this.state = {name: '章三'};}render() {// 获取变量 插值const pElem = <p>{this.state.name}</p>;return pElem;// // 表达式// const exprElem = <p>{this.state.flag ? 'yes' : 'no'}</p>;// return exprElem;}
}export default JSXBaseDemo;

class、style

/* style.css */
.title {font-size: 30px;color: red;
}

import React from 'react';
import './style.css';class JSXBaseDemo extends React.Component {constructor(props) {super(props);this.state = {};}render() {// classconst classElem = <p className="title">设置 css class</p>;return classElem;// // style// const styleData = { fontSize: '30px',  color: 'blue' };// const styleElem = <p style={styleData}>设置 style</p>;// // 内联写法，注意 {{ 和 }}// // const styleElem = <p style={{ fontSize: '30px',  color: 'blue' }}>设置 style</p>;// return styleElem;}
}export default JSXBaseDemo;

子元素和组件

import React from 'react';
import List from '../List';class JSXBaseDemo extends React.Component {constructor(props) {super(props);this.state = {imgUrl: 'https://img1.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'};}render() {// 子元素const imgElem = <div><p>我的头像</p><img src="xxxx.png"/><img src={this.state.imgUrl}/></div>;return imgElem';// // 加载组件// const componentElem = <div>//     <p>JSX 中加载一个组件</p>//     <hr />//     <List />// </div>;// return componentElem;}
}export default JSXBaseDemo;

原生 html

import React from 'react';class JSXBaseDemo extends React.Component {constructor(props) {super(props);this.state = {};}render() {// 原生 htmlconst rawHtml = '<span>富文本内容<i>斜体</i><b>加粗</b></span>';const rawHtmlData = {__html: rawHtml // 注意，必须是这种格式};const rawHtmlElem = <div><p dangerouslySetInnerHTML={rawHtmlData}></p><p>{rawHtml}</p></div>;return rawHtmlElem;}
}export default JSXBaseDemo;

条件

  • if else
  • 三元表达式
  • 逻辑运算符：&&、||
.btn-white {color: #333;
}
.btn-black {background-color: #666;color: #fff;;
}
import React from 'react';
import './style.css';class ConditionDemo extends React.Component {constructor(props) {super(props);this.state = {theme: 'black'};}render() {const blackBtn = <button className="btn-black">black btn</button>;const whiteBtn = <button className="btn-white">white btn</button>;// // if else// if (this.state.theme === 'black') {//     return blackBtn;// } else {//     return whiteBtn;// }// // 三元运算符// return <div>//     { this.state.theme === 'black' ? blackBtn : whiteBtn }// </div>;// &&return <div>{ this.state.theme === 'black' && blackBtn }</div>;}
}export default ConditionDemo;

列表渲染

  • map
  • key
import React from 'react';class ListDemo extends React.Component {constructor(props) {super(props);this.state = {list: [{id: 'id-1',title: '标题1'},{id: 'id-2',title: '标题2'},{id: 'id-3',title: '标题3'}]};}render() {return <ul>{this.state.list.map((item, index) => {// 这里的 key 和 Vue 的 key 类似，必填，不能是 index 或 randomreturn <li key={item.id}>index {index}; id {item.id}; title {item.title}</li>;})}</ul>;}
}export default ListDemo;

事件

bind this

  • 非严格模式下，dom 事件中的 this 都是运行时的，就是浏览器执行的，指向的是 window
  • 严格模式下，这里的 this 指向 undefined

箭头函数为什么能解决 bind this ？

  • 箭头函数的 this 永远指向上级作用域。
  • 箭头函数的 this 是在定义函数时绑定的，不是在执行过程中绑定的。
  • 也就是说，函数在定义时，this 就继承了定义函数的对象。
import React from 'react';class EventDemo extends React.Component {constructor(props) {super(props);；this.state = {name: 'zhangsan'};// 修改方法的 this 指向this.clickHandler1 = this.clickHandler1.bind(this);}render() {// this - 使用 bindreturn <p onClick={this.clickHandler1}>{this.state.name}</p>;// // this - 使用静态方法// return <p onClick={this.clickHandler2}>//     clickHandler2 {this.state.name}// </p>;}clickHandler1() {// console.log('this....', this) // this 默认是 undefinedthis.setState({name: 'lisi'});}// 静态方法，this 指向当前实例clickHandler2 = () => {this.setState({name: 'lisi'});}
}export default EventDemo;

关于 event 参数

import React from 'react';class EventDemo extends React.Component {constructor(props) {super(props);；this.state = {};}render() {// eventreturn <a href="https://imooc.com/" onClick={this.clickHandler3}>click me</a>;}// 获取 eventclickHandler3 = (event) => {// 阻止默认行为event.preventDefault(); // 阻止冒泡event.stopPropagation(); // 指向当前元素，即当前元素触发console.log('target', event.target); // 指向当前元素，假象！！！console.log('current target', event.currentTarget); // 注意，event 其实是 React 封装的。// 可以看 __proto__.constructor 是 SyntheticEvent 组合事件// 不是原生的 Event ，原生的 MouseEventconsole.log('event', event); console.log('event.__proto__.constructor', event.__proto__.constructor);// 原生 event 如下。其 __proto__.constructor 是 MouseEventconsole.log('nativeEvent', event.nativeEvent);// 指向当前元素，即当前元素触发console.log('nativeEvent target', event.nativeEvent.target); // 指向 document ！！！console.log('nativeEvent current target', event.nativeEvent.currentTarget;); // 1. event 是 SyntheticEvent ，模拟出来 DOM 事件所有能力// 2. event.nativeEvent 是原生事件对象// 3. 所有的事件，都被挂载到 document 上 （React17 事件绑定到 root 上）// 4. 和 DOM 事件不一样，和 Vue 事件也不一样}
}export default EventDemo;

传递自定义参数

import React from 'react';class EventDemo extends React.Component {constructor(props) {super(props);；this.state = {list: [{id: 'id-1',title: '标题1'},{id: 'id-2',title: '标题2'},{id: 'id-3',title: '标题3'}]};}render() {// 传递参数 - 用 bind(this, a, b)return <ul>{this.state.list.map((item, index) => {return <li key={item.id} onClick={this.clickHandler4.bind(this, item.id, item.title)}>index {index}; title {item.title}</li>;})}</ul>;}// 传递参数// 最后追加一个参数，即可接收 eventclickHandler4(id, title, event) {console.log(id, title);console.log('event', event); }
}export default EventDemo;

组件和 props （类型检查）

受控组件

  • 表单的值受 state 控制。
  • value 指向 state，onChange 事件监听，使用 setState 修改值。
import React from 'react';class FormDemo extends React.Component {constructor(props) {super(props);this.state = {name: 'zhangsan'};}render() {// 受控组件return <div><p>{this.state.name}</p><label htmlFor="inputName">姓名：</label> {/* 用 htmlFor 代替 for */}<input id="inputName" value={this.state.name} onChange={this.onInputChange} /></div>;}onInputChange = (e) => {this.setState({name: e.target.value});}
}export default FormDemo;

表单的使用

import React from 'react';class FormDemo extends React.Component {constructor(props) {super(props);this.state = {name: 'zhangsan',info: '个人信息',city: 'beijing',flag: true,gender: 'male'};}render() {// // 受控组件// return <div>//     <p>{this.state.name}</p>//     <label htmlFor="inputName">姓名：</label> {/* 用 htmlFor 代替 for */}//     <input id="inputName" value={this.state.name} onChange={this.onInputChange}/>// </div>;// textarea - 使用 valuereturn <div><textarea value={this.state.info} onChange={this.onTextareaChange}/><p>{this.state.info}</p></div>;// // select - 使用 value// return <div>//     <select value={this.state.city} onChange={this.onSelectChange}>//         <option value="beijing">北京</option>//         <option value="shanghai">上海</option>//         <option value="shenzhen">深圳</option>//     </select>//     <p>{this.state.city}</p>// </div>;// // checkbox// return <div>//     <input type="checkbox" checked={this.state.flag} onChange={this.onCheckboxChange}/>//     <p>{this.state.flag.toString()}</p>// </div>;// // radio// return <div>//     male <input type="radio" name="gender" value="male" checked={this.state.gender === 'male'} onChange={this.onRadioChange}/>//     female <input type="radio" name="gender" value="female" checked={this.state.gender === 'female'} onChange={this.onRadioChange}/>//     <p>{this.state.gender}</p>// </div>;}onInputChange = (e) => {this.setState({name: e.target.value});}onTextareaChange = (e) => {this.setState({info: e.target.value});}onSelectChange = (e) => {this.setState({city: e.target.value});}onCheckboxChange = () => {this.setState({flag: !this.state.flag});}onRadioChange = (e) => {this.setState({gender: e.target.value});}
}export default FormDemo;

组件使用

  • props 传递数据
  • props 传递函数
  • props 类型检查
import React from 'react';
import PropTypes from 'prop-types';class Input extends React.Component {constructor(props) {super(props);this.state = {title: ''};}render() {return <div><input value={this.state.title} onChange={this.onTitleChange}/><button onClick={this.onSubmit}>提交</button></div>;}onTitleChange = (e) => {this.setState({title: e.target.value});}onSubmit = () => {const { submitTitle } = this.props;submitTitle(this.state.title); // 'abc'this.setState({title: ''});}
}// props 类型检查
Input.propTypes = {submitTitle: PropTypes.func.isRequired
};class List extends React.Component {constructor(props) {super(props);}render() {const { list } = this.props;return <ul>{list.map((item, index) => {return <li key={item.id}><span>{item.title}</span></li>;})}</ul>;}
}
// props 类型检查
List.propTypes = {list: PropTypes.arrayOf(PropTypes.object).isRequired
};class Footer extends React.Component {constructor(props) {super(props);}render() {return <p>{this.props.text}{this.props.length}</p>;}
}class TodoListDemo extends React.Component {constructor(props) {super(props);// 状态（数据）提升this.state = {list: [{id: 'id-1',title: '标题1'},{id: 'id-2',title: '标题2'},{id: 'id-3',title: '标题3'}],footerInfo: '底部文字'};}render() {return <div><Input submitTitle={this.onSubmitTitle}/><List list={this.state.list}/><Footer text={this.state.footerInfo} length={this.state.list.length}/></div>;}onSubmitTitle = (title) => {this.setState({list: this.state.list.concat({id: `id-${Date.now()}`,title})});}
}export default TodoListDemo;

state 和 setState

setState

  • 不可变值
  • 可能是异步更新 (针对 React <= 17)
    • 直接使用是异步更新，在第二个参数的回调函数中可以拿到最新的 state
    • 在 setTimeout 中使用是同步
    • 自定义的 dom 事件，是同步的
  • 可能会被合并 (针对 React <= 17)
    • 异步更新，setState 传入的参数是对象，那么在更新前会被合并
    • 异步更新，setState 传入的参数是函数，不会被合并
import React from 'react';class StateDemo extends React.Component {constructor(props) {super(props);// 第一，state 要在构造函数中定义this.state = {count: 0};}render() {return <div><p>{this.state.count}</p><button onClick={this.increase}>累加</button></div>;}increase = () => {// // 第二，不要直接修改 state ，要使用不可变值 -----------------------// // this.state.count++; // 错误// this.setState({//     count: this.state.count + 1 // SCU// });// 操作数组、对象的的常用形式// 第三，setState 可能是异步更新（有可能是同步更新） ------------------// this.setState({//     count: this.state.count + 1// }, () => {//     // 联想 Vue $nextTick - DOM//     // 回调函数中可以拿到最新的 state//     console.log('count by callback', this.state.count); // });// console.log('count', this.state.count); // 异步的，拿不到最新值// // setTimeout 中 setState 是同步的// setTimeout(() => {//     this.setState({//         count: this.state.count + 1//     });//     console.log('count in setTimeout', this.state.count);// }, 0);// 自己定义的 DOM 事件，setState 是同步的。// 第四，state 异步更新的话，更新前会被合并 --------------------------// // 传入对象，会被合并（类似 Object.assign ）。执行结果只一次 +1// this.setState({//     count: this.state.count + 1// });// this.setState({//     count: this.state.count + 1// });// this.setState({//     count: this.state.count + 1// });// 传入函数，不会被合并。执行结果是 +3this.setState((prevState, props) => {return {count: prevState.count + 1};});this.setState((prevState, props) => {return {count: prevState.count + 1};});this.setState((prevState, props) => {return {count: prevState.count + 1};});}// bodyClickHandler = () => {//     this.setState({//         count: this.state.count + 1//     });//     console.log('count in body event', this.state.count);// }// componentDidMount() {//     // 自己定义的 DOM 事件，setState 是同步的//     document.body.addEventListener('click', this.bodyClickHandler);// }// componentWillUnmount() {//     // 及时销毁自定义 DOM 事件//     document.body.removeEventListener('click', this.bodyClickHandler);//     // clearTimeout// }
}export default StateDemo;// -------------------------- 我是分割线 -----------------------------// // 不可变值（函数式编程，纯函数） - 数组
// const list5Copy = this.state.list5.slice();
// list5Copy.splice(2, 0, 'a'); // 中间插入/删除
// this.setState({
//     list1: this.state.list1.concat(100), // 追加
//     list2: [...this.state.list2, 100], // 追加
//     list3: this.state.list3.slice(0, 3), // 截取
//     list4: this.state.list4.filter(item => item > 100), // 筛选
//     list5: list5Copy // 其他操作
// });
// // 注意，不能直接对 this.state.list 进行 push pop shift unshift splice 等，这样违反不可变值// // 不可变值 - 对象
// this.setState({
//     obj1: Object.assign({}, this.state.obj1, {a: 100}),
//     obj2: {...this.state.obj2, a: 100}
// })
// // 注意，不能直接对 this.state.obj 进行属性设置，这样违反不可变值

React18 中的 setState

  • React 组件事件：异步更新 + 合并 state
  • DOM 事件、setTimeout：异步更新 + 合并 state
  • Automatic Batching 自动批处理
import { useState, useEffect } from 'react';function useStateDemo() { const [value, setValue]= useState(100);function clickHandler() { // // 合并后 +1// setValue(value + 1); // setValue(value + 1); // setValue(value + 1); // console.log(value); // 100 异步更新 setTimeout(() => {// 合并后 +1setValue(value + 1); setValue(value + 1); setValue(value + 1); console.log(value); // 100 异步更新 });} useEffect(() =>{ // 自绑定 DOM 事件 document.getElementById('btn2').addEventListener('click', () => { // 合并后 +1setValue(value + 1); setValue(value + 1); setValue(value + 1); console.log(value); // 100 异步更新 });});return <div> <span>{value}</span> <button onClick={clickHandler}>increase1</button> <button id="btn2">increase2</button> </div>;
}
  • React <= 17：只有 React 组件事件才批处理（合并 + 异步）
  • React18：所有事件都自动批处理 Automatic Batching

组件生命周期

react 生命周期图示

在这里插入图片描述

  • 初始化阶段：constructor
  • 挂载阶段：componentDidMount
  • 更新阶段：componentDidUpdate
  • 卸载阶段：componentWillUnmount

展示不常用的生命周期图示

在这里插入图片描述

  • shouldComponentUpdate：可以控制是否更新

父子组件生命周期

  • 父组件先 constructor，然后子组件才 constructor
  • 子组件先 componentDidMount，然后父组件 componentDidMount
  • 子组件先 componentDidUpdate，然后父组件 componentDidUpdate
  • 父组件先触发 componentWillUnmout，然后子组件触发 componentWillUnmount

FQA

  1. React 事件为何 bind this ？
    • 非严格模式下，dom 事件中的 this 都是运行时的，就是浏览器执行的，指向的是 window
    • 严格模式下，这里的 this 指向 undefined
  2. 箭头函数为什么能解决 bind this ？
    • 箭头函数的 this 永远指向上级作用域：箭头函数的 this 是在定义函数时绑定的，不是在执行过程中绑定的。也就是说，函数在定义时，this 就继承了定义函数的对象。
  3. react 的事件和 vue 的区别。
    • vue 的事件是原生 event（MouseEvent），事件是绑定在当前元素上的
    • react 的事件是 SyntheticEvent，React16 事件是绑定在 document 上的，React17 后是绑定在 root 上的；react 获取原生事件是通过 event.nativeEvent 获取。
  4. react 为什么对事件对象进行二次封装？
    • 兼容各个平台，不仅仅是 DOM ，如 react native。
  5. React17 为什么将事件绑定到 root 上？
    • 有利于多个 React 版本并存（document 只有一个，而 root 可以有多个），例如微前端。
      在这里插入图片描述
  6. 描述 react 组件的生命周期。
  • 初始化阶段：constructor
  • 挂载阶段：componentDidMount
  • 更阶段：componentDidUpdate
  • 卸载阶段：componentWillUnmount
  • 在更新阶段 componentDidUpdate 之前还有一个 shouldComponentUpdate：可以控制是否更新
  1. react 组件如何通讯？
    • 父子组件通过 props 传递数据
    • 可通过 context 从顶层组件向子孙组件进行下发数据
    • 使用 redux 可以全局组件共享状态

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MR实战：网址去重

MR实战：网址去重

文章目录 一、实战概述二、提出任务三、完成任务&#xff08;一&#xff09;准备数据1、在虚拟机上创建文本文件2、上传文件到HDFS指定目录 &#xff08;二&#xff09;实现步骤1、创建Maven项目2、添加相关依赖3、创建日志属性文件4、创建网址去重映射器类5、创建网址去重归并…
阅读更多...
【JaveWeb教程】（18） MySQL数据库开发之 MySQL数据库设计-DDL 如何查询、创建、使用、删除数据库数据表 详细代码示例讲解

【JaveWeb教程】（18） MySQL数据库开发之 MySQL数据库设计-DDL 如何查询、创建、使用、删除数据库数据表 详细代码示例讲解

目录 2. 数据库设计-DDL2.1 项目开发流程2.2 数据库操作2.2.1 查询数据库2.2.2 创建数据库2.2.3 使用数据库2.2.4 删除数据库 2.3 图形化工具2.3.1 介绍2.3.2 安装2.3.3 使用2.2.3.1 连接数据库2.2.3.2 操作数据库 2.3 表操作2.3.1 创建2.3.1.1 语法2.3.1.2 约束2.3.1.3 数据类…
阅读更多...
Python爬虫之Scrapy框架系列（24）——分布式爬虫scrapy_redis完整实战【XXTop250完整爬取】

Python爬虫之Scrapy框架系列（24）——分布式爬虫scrapy_redis完整实战【XXTop250完整爬取】

目录&#xff1a; 1.使用分布式爬取XX电影信息&#xff08;1&#xff09;settings.py文件中的配置&#xff1a;&#xff08;2&#xff09;spider文件的更改&#xff1a;&#xff08;3&#xff09;items.py文件&#xff08;两个项目一致&#xff01;&#xff09;&#xff1a;&am…
阅读更多...
vue前端开发自学demo-input标签数据双向绑定

vue前端开发自学demo-input标签数据双向绑定

vue前端开发自学demo-input标签数据双向绑定&#xff01;今天为大家 展示的内容是&#xff0c;前端开发常见的&#xff0c;form表单里面的&#xff0c;一些输入数据的元素&#xff0c;动态绑定数据的案例。比如input,以及checkbox的状态绑定案例。 首先&#xff0c;老规矩&…
阅读更多...
如何正确使用高速探头前端--probe head

如何正确使用高速探头前端--probe head

目前市面上的高速有源探头种类丰富&#xff0c;使用灵活&#xff0c;如下图所示&#xff0c;结构多为放大器焊接前端的组合&#xff0c;以E2677B探头前端为例&#xff0c;其焊接前端电阻有三种选择&#xff0c;91ohm时可实现全带宽使用&#xff08;12GHz&#xff09;&#xff0…
阅读更多...
从生活入手学编程(1)：Edge浏览器设置自动刷新专业教程

从生活入手学编程(1)：Edge浏览器设置自动刷新专业教程

一、前言 我们都知道&#xff0c;Edge浏览器运行时的速度卡的实在是感人…… 于是今天&#xff0c;我就突发奇想&#xff0c;来看一看怎么刷新并且还能保留页面内容。 二、探索 首先&#xff0c;我在此提醒您&#xff0c;在使用这种方法时要非常小心。因为更改网页源代…
阅读更多...
面试算法110：所有路径

面试算法110：所有路径

题目 一个有向无环图由n个节点&#xff08;标号从0到n-1&#xff0c;n≥2&#xff09;组成&#xff0c;请找出从节点0到节点n-1的所有路径。图用一个数组graph表示&#xff0c;数组的graph[i]包含所有从节点i能直接到达的节点。例如&#xff0c;输入数组graph为[[1&#xff0c…
阅读更多...
直播预告丨看零售场，如何玩转 MaaS

直播预告丨看零售场，如何玩转 MaaS

今年&#xff0c;有一个被频繁提及的词是MaaS 这类工具正在帮助千行百业实现大模型落地产业 在零售场&#xff0c;特别是像京东这样拥有超高并发、超复杂协同的电商场内 也沉淀出了一套通用的AI基础设施——九数算法中台 从提升客户服务体验、平台效率出发&#xff0c;训练各…
阅读更多...
【JVM】本地方法接口 Native Interface

【JVM】本地方法接口 Native Interface

一、JNI简介 JVM本地方法接口&#xff08;Java Native Interface&#xff0c;JNI&#xff09;是一种允许Java代码调用本地方法&#xff08;如C或C编写的方法&#xff09;的机制。这种技术通常用于实现高性能的计算密集型任务&#xff0c;或者与底层系统库进行交互。 二、JNI组…
阅读更多...
华为面经总结

华为面经总结

为了帮助大家更好的应对面试&#xff0c;我整理了往年华为校招面试的题目&#xff0c;供大家参考~ 面经1 技术一面 自我介绍说下项目中的难点volatile和synchronized的区别&#xff0c; 问的比较细大顶堆小顶堆怎么删除根节点CSRF攻击是什么&#xff0c;怎么预防线程通信方式…
阅读更多...
CMU15-445-Spring-2023-Project #2 - B+Tree

CMU15-445-Spring-2023-Project #2 - B+Tree

前置知识&#xff1a;参考上一篇博文 CMU15-445-Spring-2023-Project #2 - 前置知识&#xff08;lec07-010&#xff09; CHECKPOINT #1 Task #1 - BTree Pages 实现三个page class来存储B树的数据。 BTree Page internal page和leaf page继承的基类&#xff0c;只包含两个…
阅读更多...
最实用的 8 个免费 Android 数据恢复软件

最实用的 8 个免费 Android 数据恢复软件

如果您正在寻找最好的免费 Android 数据恢复软件&#xff0c;那就不用再犹豫了&#xff0c;因为我已经列出了最好的软件。不可否认&#xff0c;智能手机和平板电脑等 Android 设备正在与技术一起发展。与以前相比&#xff0c;它们也更加融入了我们的日常生活。 Android 智能手…
阅读更多...
Flask+Bootstrap4案例[有源码]

Flask+Bootstrap4案例[有源码]

文章目录 Flask案例开源地址简介一、环境搭建1.1 canda常用命令1.2 创建虚拟环境1.3 安装flask1.4 导入flaskdemo项目 二、项目配置2.1 开启DEBUG2.2 配置数据库连接参数2.3 安装项目依赖2.4 修改flaskdemo中的错误 三、组件3.1 flash3.2 pagination3.3 table3.4 nav3.5 form3.…
阅读更多...
冠军团队！第二届百度搜索创新大赛AI方案

冠军团队！第二届百度搜索创新大赛AI方案

Datawhale干货 作者&#xff1a;李柯辰&#xff0c;Datawhale成员 写在前面 大家好&#xff0c;我们是2023年第二届百度搜索创新大赛 赛道三——AI应用设计赛道的冠军团队——“肝到凌晨”&#xff0c;很高兴能与大家分享我们这次比赛的经验&#xff0c;同时也希望以后有机会可…
阅读更多...
前端-基础 表格标签 - 相关属性详解

前端-基础 表格标签 - 相关属性详解

目录 相关属性 &#xff1a; align 属性 &#xff1a; border 属性 &#xff1a; cellpadding 属性 &#xff1a; cellspacing 属性 &#xff1a; width 属性 &#xff1a; height 属性 &#xff1a; 首先&#xff0c;需要声明的是 表格标签这部分属性&…
阅读更多...
springboot 房屋租赁系统

springboot 房屋租赁系统

spring boot mysql mybatis 前台后端
阅读更多...
揭秘LoRA与QLoRA：百次实验告诉你如何微调LLM！

揭秘LoRA与QLoRA：百次实验告诉你如何微调LLM！

原文链接&#xff1a;揭秘LoRA与QLoRA&#xff1a;百次实验告诉你如何微调LLM&#xff01;​​​​​​​ LoRA&#xff08;低秩适应&#xff09;是目前应用最广泛、参数效率最高的自定义大型语言模型&#xff08;LLM&#xff09;微调技术之一。本文不仅介绍了使用QLoRA节省内存…
阅读更多...
用判断对齐大语言模型

用判断对齐大语言模型

1、写作动机&#xff1a; 目前的从反馈中学习方法仅仅使用判断来促使LLMs产生更好的响应&#xff0c;然后将其作为新的示范用于监督训练。这种对判断的间接利用受到无法从错误中学习的限制&#xff0c;这是从反馈中学习的核心精神&#xff0c;并受到LLMs的改进能力的制约。 2…
阅读更多...
科学和统计分析软件GraphPad Prism mac介绍说明

科学和统计分析软件GraphPad Prism mac介绍说明

GraphPad Prism for Mac是一款科学和统计分析软件&#xff0c;旨在帮助研究者、科学家和学生更轻松地处理和可视化数据。 GraphPad Prism for Mac是一款功能强大、易于使用的科学和统计分析软件&#xff0c;适用于各种类型的数据处理和可视化需求。无论您是进行基础研究、临床试…
阅读更多...
给自己创建的GPTs添加Action(查天气）

给自己创建的GPTs添加Action(查天气）

前言 在这篇文章中&#xff0c;我将分享如何利用ChatGPT 4.0辅助论文写作的技巧&#xff0c;并根据网上的资料和最新的研究补充更多好用的咒语技巧。 GPT4的官方售价是每月20美元&#xff0c;很多人并不是天天用GPT&#xff0c;只是偶尔用一下。 如果调用官方的GPT4接口&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023