react 学习笔记 李立超老师 | (学习中~)

文章目录

  • react学习笔记01
    • 入门
      • 概述
      • React 基础案例HelloWorld
        • 三个API介绍
      • JSX
        • JSX 解构数组
      • 创建react项目(手动)
      • 创建React项目(自动) | create-react-app
      • 事件处理
      • React中的CSS样式
        • 内联样式 | 内联样式中使用state (不建议使用)
        • 外部样式表 | CSS Module
    • React组件
      • 函数式组件和类组件
        • 生成一组标签/组件
      • props 父组件给子组件传属性/方法
        • 给组件设置className样式不生效
      • state 维护组件的响应式状态
        • useState(stateInitValue)
      • Ref 获取DOM对象
      • 非受控组件与受控组件
        • 数据的双向绑定
        • 子组件给父组件传值 = props传递函数 + 子组件调用函数
        • vue中v-if与v-show的React写法
        • Portal 将元素渲染到指定位置
      • Fragment 组件
      • Context 祖先组件向子孙组件传值
    • Effect 副作用
      • setState()在函数组件中的执行流程
      • React.StrictMode

react学习笔记01

学习视频 react18 李立超

学习中get到的新用法

  1. Date类的toLocalString方法，可以更为灵活的处理Date类。

  2. 标签属性中闭包的使用
    举例：仅在删除状态时使用id，不需要单独传递id属性。

    const logItemDate = logsData.map(item=> <LogItem  onDelLog ={()=> delLog(item.id)}>)

  3. 移动端适配 rem + vw
    可以使用vw获取视口宽度，将font-size设置单位为vw，然后结合rem做适配。
    1vw = 视口宽度的1% -> 100vw = 视口的宽度

    一般设置html的font-size值 = 屏幕宽度/设计稿宽度，但移动端比如375px计算出的font-size值小于12px会造成一些错误和奇怪的问题，因此把比例扩大100倍。

    为了使比例不变，相应的设计图元素使用时设计图元素大小/100 rem

    根html的font-size值 = 屏幕宽度/设计稿宽度*100 
font-size = 100vw/设计稿宽度*100

入门

概述

AJAX+DOM可以实现网页的局部刷新，但是新数据不能直接在网页中显示，需要通过DOM将数据转换为网页中的节点。

react帮助我们根据不同的数据来快速构建用户项目,同时在构建过程中确保其流畅度。

react特点

1.使用虚拟DOM而不是真正的DOM

2.声明式编码(声明式:结果为导向,不关心结果 命令式:一行代码一个命令)

3.支持服务器端渲染

React 基础案例HelloWorld

入门案例采用外部引入脚本使用(正常开发使用包管理器)

  • react.development.js react 是react核心库，只要使用react就必须要引入。下载地址
  • react-dom.development.js react-dom 是react的dom包，使用react开发web应用时必须引入。下载地址
  • babel.min.js 浏览器不能识别JSX，利用该babel将JSX转换为JS代码。下载地址

1.引入脚本

<script src="../script/react.development.js"></script>
<script src="../script/react-dom.development.js"></script>

2.创建一个React元素

React.createElement(组件名/元素名,元素中的属性,元素的子元素/内容)

const reactDiv = React.createElement('div',{},'我是react创建的div');

3.获取根元素对应的React元素

ReactDOM.createRoot(Dom元素);

// html
<div id="root"></div>
// js
const root = ReactDOM.createRoot(document.getElementById('root'));

4.将reactDiv渲染到React根元素中

root.render(reactDiv)
三个API介绍

  • React.createElement(type,[props],[...children]) 用来创建React元素(并不是ReactDom，所以这里使用React调用)

    • class属性需要使用className属性代替。

    • type如果是标签名(元素)需要全小写，首写母大写会被认为是组件

    • 在设置属性时，事件名应遵守驼峰命名法，事件值需要是一个函数，不能是console.log(xx)这种表达式。如果直接写一个函数调用语句，则在绑定事件时就会被调用(之后事件不会被触发)

    • React元素是一次性的，一旦创建就无法修改，只能使用新创建的元素进行替代

  • ReactDOM.createRoot(container[,options]);用来创建React的根容器，根容器用来放置React元素

    • 将参数的DOM元素转换为React根元素

  • ReactDOM实例.render(ReactElement)将React元素渲染到根元素中

    • DOM根元素中所有的内容都会被删除(不会修改DOM根元素本身)，被React元素转换而成的DOM元素替换
    • 重复调用render()，React会将两次虚拟DOM进行对比，确保只修改发生变化的元素，对DOM做最少修改。首次调用时，容器节点里的所有DOM都会被替换，后续的调用则会使用React的DOM差分算法(diff)进行更新

JSX

上述方法中React.createElement('button', {}, '我是按钮')还是命令式编码方法，告诉react用createElement去创建一个button按钮，该按钮没有属性，内容为我是按钮。

声明式编程结果导向，告诉结果，不关系过程怎么样。

const button = <button>我是按钮</button>; // 告诉react我需要一个button按钮元素，不关心react如何创建

在React中可以通过JSX（JavaScript Syntax Extension）来创建React元素，JSX 让我们以类似于HTML 的形式去使用 JS。JSX是React中声明式编程的体现方式。

JSX需要被翻译为JS代码，才能被React执行。 要在React中使用JSX，必须引入babel来完成“翻译”工作。

  • JSX就是React.createElement()的语法糖，最终都会转换为以调用React.createElement()创建元素的代码。

  • JSX在执行之前都会被babel转换为JS代码

    <!-- 引入babel -->
<script src="script/babel.min.js"></script>
<!--设置js代码被babel处理-->
<script type="text/babel">const div = <div>我是一个div<button>我是按钮</button></div>;const root = ReactDOM.createRoot(document.getElementById('root'));root.render(div);    
</script>

  • JSX不是字符串，不需要加引号

const div =  <div>我是一个div</div>  // 正确写法
  • JSX中html标签应该小写开头，React组件应该大写开头
<div> // 小写html标签
<Div> // 大写组件

  • JSX有且只有一个根标签

  • JSX的标签必须正常结束(自结束标签必须写/)

const input = <input type="text" / >
  • 在JSX中使用{}嵌入表达式(有值的语句就是表达式)
const name = "ranran"
const div = <div>{name}</div> // 才会显示ranran,没有括号会把name识别为字符串

  • 如果表达式值为空值、布尔值、undefined，将不会显示

  • 在JSX属性可以直接在标签中设置

    • 事件绑定需要是一个函数，而不能直接是函数调用(绑定时就会被触发，不会延迟触发)
    • className代替class
    • style必须使用对象设置，属性名必须用驼峰命名法
const div = <div onClick="()=>{console.log('ranran')}" style={{backgroundColor: "yellowgreen", border: '10px red solid'}}
></div> // 外面的大括号表示style必须使用对象设置，里面的对象表示给他设置的值是一个对象(有多个样式)

  • 在语句中可以操作JSX

    const name = 'ranran';
const lang = 'cn';let div;
if(lang === 'en'){div = <div>hello {name}</div>;
}else if(lang === 'cn'){div = <div>你好 {name}</div>;
}
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(div)
JSX 解构数组

JSX在解构{}的内容时，如果内容是数组则会自动将其展开。

//页面:孙悟空猪八戒沙和尚
const data = ['孙悟空', '猪八戒', '沙和尚'];
const div = <div>{data}</div> 
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(div)/*
· 孙悟空
· 猪八戒
· 沙和尚
*/
const data = ['孙悟空', '猪八戒', '沙和尚'];
const list = <ul>{data.map(item => <li>{item}</li>)}</ul>;
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(list)//页面:孙悟空猪八戒沙和尚
const data = ['孙悟空', '猪八戒', '沙和尚'];
const div = <div>{data}</div> 
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(div)/*
· 孙悟空
· 猪八戒
· 沙和尚
*/
const data = ['孙悟空', '猪八戒', '沙和尚'];
const list = <ul>{data.map(item => <li>{item}</li>)}</ul>;
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(list)

React通过虚拟DOM将React元素和原生DOM元素进行映射

当我们调用root.render时。页面就会发生重新渲染
React通过diff算法将新的虚拟DOM和旧的比较，找到发生变化的元素，并且只对变化的元素进行修改。

数组中(当前数组)每一个元素都需要设置一个唯一key值
重新渲染页面时，React 有key值会比较key值相同的元素，没key值会按照顺序进行比较。

  1. 开发中一般会采用数据的 id 作为 key
  2. 尽量不使用元素的 index 作为 key 索引会跟着元素顺序的改变而改变，所以使用索引做 key 跟没有 key 是一样的。 唯一的不同就是，控制台的警告没了。 当元素的顺序不会发生变化时，用索引做 key 也没有什么问题。
const data = ['孙悟空', '猪八戒', '沙和尚'];
const list = <ul>{data.map(item => <li key={ item }>{ item }</li>)}</ul>;
// const list = <ul>{data.map((item,index) => <li key={ index }>{ item }</li>)}</ul>;
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(list)

​

创建react项目(手动)

React官方为了方便开发，提供react-scripts包(①打包②测试服务器-根据代码变化自动刷新避免改一点就重新打包)，包中提供了项目开发中的大部分依赖。
由于提供了配置好的工具，我们一些操作就要符合约定。

使用包管理器管理项目，没有办法直接放在网页中运行。需要经过webpack打包，才能在浏览器中正常执行。

  1. 创建React
根目录- public(可以web直接访问的文件,不用打包就可以浏览器访问的静态资源)- index.html （入口文件，必须有，首页模板打包时以此为模板生成最终的index/html | 添加标签 <div id="root"></div>）- src(源码，JS源代码)- index.js(必须，webpack打包文件的入口，该文件会被自动引入public/index.html中)
  1. pnpm init 初始化项目，生成package.json文件(大部分时候这一步可以省略)
  2. pnpm install react react-dom react-scripts 安装项目依赖
  3. 编写代码src/index.js
// 引入ReactDOM
import ReactDOM from 'react-dom/client';// 创建一个JSX
const APP = <div><h1>这是一个react项目</h1></div>// 获取一个根元素
const root = ReactDOM.createRoot(document.getElementById('root'));
// 将APP渲染进根容器
root.render(APP);
  1. 运行项目
  • pnpm react-scripts build 打包项目，一般开发完成之后需要上线时使用该命令进行打包。
    初次需要输入y确认。打包时需要默认配置，会询问是否添加默认配置。

在这里插入图片描述

正常情况，右键打开会报错。因为打包好的文件需要部署在服务器上运行，而不是直接使用浏览器打开。每次打包后路径都是这样需要手动修改。

在这里插入图片描述

  • pnpm react-scripts start 开发中使用的命令
    通过webpack启动内部的测试服务器，可以实时对更新代码进行编译。这个命令太长，可以在package.json的 scripts 选项中配置命令，下次可以使用命令pnpm start。

    "scripts": {"start": "react-scripts start"
}

react 一定需要两个文件

  • public/index.html：入口文件，首页模板打包时以此为模板生成最终的index/html - 提供dom root根节点
  • src/index.js：webpack打包文件的入口，该文件会被自动引入public/index.html中 - 将root转化为react根节点元素后，将react元素挂载到react根节点中

创建React项目(自动) | create-react-app

命令：npx create-react-app 项目名

除了public/index.html和src/index.js必须保留外，其他的东西都是可以删除的。

/*reate-react-app 创建index.js其中<React.StrictMode>使用严格模式渲染React元素 - 可以不使用
*/
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode>aaa</React.StrictMode>
);

事件处理

react 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

  • React 事件的命名采用小驼峰式（camelCase），而不是纯小写。

  • 使用 JSX 语法时需要传入一个函数作为事件处理函数。事件绑定需要是一个函数，而不能直接是函数调用(绑定时就会被触发，不会延迟触发，等于将函数的返回值给了该事件)

    // 传统 HTML
<button onclick="activateLasers()">Activate Lasers
</button>
// React
<button onClick={activateLasers}>  Activate Lasers
</button>

  • React事件通过会传递事件对象event，但其不同于原生的事件对象，是React包装后的事件对象，该对象已经处理了跨浏览器的兼容性问题。

    React中事件回调函数不能通过返回false阻止默认行为，必须显式地使用event事件对象的preventDefault方法

    // 传统 HTML<form οnsubmit="console.log('You clicked submit.'); return false"><button type="submit">Submit</button>
</form>// React
function Form() {function handleSubmit(e) {e.preventDefault();    console.log('You clicked submit.');}return (<form onSubmit={handleSubmit}><button type="submit">Submit</button></form>);
}

React中的CSS样式

内联样式 | 内联样式中使用state (不建议使用)

style必须使用对象设置，属性名必须用驼峰命名法

const StyleDemo = () => {return (<div style={{color:'red', backgroundColor:'#bfa', fontSize:20, borderRadius:12}}>我是Div</div>);
};export default StyleDemo;

当样式过多，JSX会比较混乱，可以使用变量去保存对象

import React from 'react';const StyleDemo = () => {const divStyle = {color: 'red', backgroundColor: '#bfa', fontSize: 20, borderRadius: 12}return (<div style={divStyle}>我是Div</div>);
};export default StyleDemo;

内联样式中使用state
当样式是动态时，可以在样式中使用state变量。

import React, {useState} from 'react';const StyleDemo = () => {const [showBorder, setShowBorder] = useState(false);const divStyle = {color: 'red',backgroundColor: '#bfa',fontSize: 20,borderRadius: 12,border: showBorder?'2px red solid':'none'};const toggleBorderHandler = ()=> {setShowBorder(prevState => !prevState);};return (<div style={divStyle}>我是Div<button onClick={toggleBorderHandler}>切换边框</button></div>);
};export default StyleDemo;
外部样式表 | CSS Module

外部样式是指将样式编写到外部的css文件中，直接通过import引用。

直接import引入的样式都是全局样式，其他组件也看得见这个样式。如果不同的样式表中出现了相同的类名，会出现相互覆盖情况。

import './index.css'

CSS Module
使用CSS Module后，网页中元素的类名会自动计算生成并确保唯一。

如果引用同一个模块，计算出来的类名是相同的。

CSS Module在React中已经默认支持(前提是使用了react-script)

  1. 文件样式的文件名为xxx.module.css
  2. 在组件中引入样式的格式为import xxx from './xxx.module.css'
  3. 设置类名时通过xxx.yyy的形式来设置
/*
StyleDemo.module.css
*/
.myDiv{color: red;background-color: #bfa;font-size: 20px;border-radius: 12px;
}/*
StyleDemo.js
*/
import Styles from './StyleDemo.module.css';const StyleDemo = () => {return (<div className={Styles.myDiv}>我是Div</div>);
};export default StyleDemo;

React组件

组件需要遵守的规则

  • 组件名首字母必须大小(小写字母开头的组件会被视为原生DOM标签)
  • 组件中只能有一个根元素

函数式组件和类组件

React中定义组件有两种方式

  • 基于函数的组件 - 函数式组件(推荐) ：函数组件是返回JSX普通函数
  • 基于类的组件 - 类组件

函数式组件

函数组件是返回JSX普通函数

//1.创建函数式组件 App.js
const App = () => {return <div>我是App组件！</div>
};
// 2.导出App
export default App;// index.js
// 3.引入App
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById('root'));
// 4.React组件可以直接通过JSX渲染
root.render(<App/>);	//root.render(App()); 也可以，只是<App/>内部做了更多的事情。

类组件

1.创建一个ES6 class，并继承于React.Component

2.添加一个render方法，方法的返回值为JSX

import React from "react"
//1.创建类组件  必须要继承React.Component
class App extends React.Component{constructor(props){ // 参数props接受父组件的传值this.state = 'xxx' //state的使用}// 2.添加render方法render(){return <div>我是一个类组件{this.props}</div>}
}// index.js
// 3.引入App
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById('root'));
// 4.React组件可以直接通过JSX渲染
root.render(<App/>);	//root.render(App()); 也可以，只是<App/>内部做了更多的事情。

props、state、ref

  • 类组件的props存储在类的实例对象中，可以通过this.props访问。

  • 类组件中state统一存储到了实例对象的state属性中，可以通过this.state来访问，通过this.setState()修改。

    • 通过this.setState修改state，只修改设置了state的属性，并不会修改没设置的第一层属性。

  • 通过React.createRef()(函数式为useRef)创建属性存储DOM对象，同样通过对象.current获取

  • 事件回调函数需要定义为类的方法,建议使用箭头函数，这样this指向的是react实例。否则函数里的this会执行设置事件的dom元素

import React，{ Component } from 'react'class App extends Component{state = {count:0,age:{} }  divRef = React.createRef();// 事件回调函数需要定义为类的方法,建议使用箭头函数，这样this指向的是react实例。否则函数里的this会执行设置事件的dom元素clickHandler = ()=>{// 写法1:this.setState({count:this.state.count+1})// 写法2this.setState(prevCount => {return {count:prevCount+1;}})}retnder(){return <div><h1 ref={ divRef }>this.props<h1><h1 @onClick={this.clickHandler}>this.state.count<h1>   </div>}
}
生成一组标签/组件

在react中对于根据数组数据产生一组标签或者一组组件，没有类似vue的v-for指令，一般使用{ data.map(JSX) }的语法进行生成。

const App= () => {const data = [{title:"1",id:"0"},{title:"2",id:"1"},{title:"3",id:"2"}];return <div>{ data.map(item => <Button key={item.id} titile={item.title}></Button >) }</div> /*写法1 return <div> { data.map(item => <Button key={item.id} titile={item.title} />) }  </div> 写法2:将对象的每个属性都传递return <div> { data.map(item => <Button {...item}>) </div>}*/
};export default App;

props 父组件给子组件传属性/方法

父组件通过使用子组件时，定义自定义参数传递属性/方法。子组件通过参数props接收(函数式组件的第一个参数)。
react中的props类似vue中的props，是只读属性是无法修改的

props.children中可以获取到父组件中，子组件标签体内部的值。

// 父组件
<Button bgColor='red' color={ color }>我是一个按钮</Button>//子组件
const Button = (props) => {return <button style={{backgroundColor:props.bgColor, color:props.color}}>{props.children}</button>;
};export default Button;
给组件设置className样式不生效

原因

className会被认为是一个属性传递给子组件，需要在子组件的根元素使用className={props.className}接收。

state 维护组件的响应式状态

在React中，当组件渲染完毕后，再修改组件中的变量，不会使组件重新渲染。state相当于一个变量，只不过在React中进行了注册。React会监控整个变量的变化，当state发生变化时，会自动触发组件的重新渲染。

页面的渲染靠的是render函数

state概述

state与props类似，都是一种存储属性的方式。

  • state只属于当前组件(组件的私有属性)，其他组件无法使用。
  • state的值是对象，当其内容发生变化相关组件会一起刷新
useState(stateInitValue)

通过钩子函数useState(stateInitValue)创建state，React中钩子函数只能用于函数组件或自定义钩子。

  • 参数是整个state变量的初始值
  • 函数返回一个数组[stateVariable,setStateFunction]，第一个元素是state变量的初始值(只用于显示)，第二个元素是修改该变量的函数(函数的参数为新值)。调用修改函数修改state变量的值(state值发生变化)会触发组件的重新渲染，直接修改state变量不会触发组件的重新渲染。
import { useState } from 'React'const [stateVariable,setStateFunction] = useState(1);

注意点

  1. 当state值是一个对象时，setState()修改时，使用新的对象去替换已有对象。
const [user, setUser] = useState({name:"ranran",age:18})
user.name = "xxx"; 
serUser(user); // user是对象，对象的地址没有发生变化，所以不会引起组件重新渲染/* 
解决方案:将其拷贝给另一个新对象，修改新对象的属性
*/
setUser({...user,name:"xxx"}) // 后面的name会覆盖前面的name

  1. 通过setState()去修改一个state时，并不表示修改当前的state，修改的是组件下一次渲染的state

  2. setState()会触发组件的异步渲染(并不是马上调用就渲染，放入事件循环队列中等待执行)，所以当调用setState()需要使用state值时，可能出现计算错误。

    因为setState()修改的是下一次渲染的state，如果下一次渲染还没进行前又调用了setState()，此时state还是旧值，所以就会出现计算错误。

    解决办法 : 通过传递回调函数的形式修改state

    回调函数的返回值会成为新的state值，回调函数执行时React会将最新的state值作为参数传递。

    setCount(state => state+1); // 传递参数，React会保证参数的state是最新值

如果setState()中需要用到旧值，参数都采用函数的形式。

Ref 获取DOM对象

Ref是reference的简写，用来获取真实DOM的引用。

  • 使用useRef()钩子函数获取DOM对象
    • 1.通过useRef()钩子函数返回一个普通JS对象，React会自动将DOM对象传递到该对象的current属性中。
    • 2.被引用的DOM元素上添加ref属性，值为上述的对象。
      根据描述，直接创建一个有current属性的普通JS对象可以实现相同的效果。

两种方法的不同点

  • 自定义对象方法，组件每次重新渲染，都会创建一个新对象
  • 使用useRef()函数返回的对象的声明周期和组件的声明周期一致，所以每次重新渲染，该ref对象都是原来的。
import {useRef} from 'react';const MyComponent = () => {const divRef = useRef();/*const divRef = {current:null}*/const clickHandler = () => {console.log(divRef);};return (<div ref={divRef} onClick={clickHandler}>一个div</div>      );
};export default MyComponent;

非受控组件与受控组件

非受控组件：表单中的数据来源于用户填写的组件，表单元素的值不会更新state，输入数据都是现用现取的。

受控组件：使 React 的 state 成为唯一数据源，由state控制表单。

数据的双向绑定

将表单的value绑定为state数据，表单的onChange事件触发时，通过事件对象event获取到新值，然后使用setState修改state的值为新值。

import { useState } from 'react';
import './index.css';const Demo = () => {// 如果有多个表单，可以将表单数据设置为一个对象const [inputValue, setInputValue] = useState('');return (<><inputtype="text"className="inputDemo"value={inputValue}onChange={e => {setInputValue(e.target.value);}}/></>);
};export default Demo;
子组件给父组件传值 = props传递函数 + 子组件调用函数
  1. 在父组件中，使用props给子组件传递一个自定义事件
  2. 在子组件中将需要传递的数据作为函数参数，调用函数
// 父组件
<LogsItem onSavaLog={ savaLogHandler }>// 子组件
const LogsItem = (props) => {props.savaLogHandler("需要传递的数据");
}

关于传递setState函数给子组件的一些说法：尽量不要这样做，state在哪里，setState尽量就在哪里。

vue中v-if与v-show的React写法
  • v-if-v-else配对出现 可以使用条件判断
  • v-show/仅有v-if 可以使用&&
// v-if/v-else 可以使用条件判断
控制变量 ? v-if显示的 : v-else显示的// v-show/仅有v-if 可以使用&& 
控制变量 && v-show显示的

如果显示出来的组件内部需要修改外部的控制变量，react中一般的做法时将函数作为参数传递。因为控制变量在外部，内部只需要调用该函数，外部修改控制变量的值。

Portal 将元素渲染到指定位置

在React中，父组件引入子组件后，子组件会直接在父组件内部渲染。换句话说，React元素中的子组件，在DOM中，也会是其父组件对应DOM的后代元素。

问题描述
每个组件都是相同的构成(想象成一个列表)，组件内部包含一个子组件，该子组件的作用是生成一个遮罩覆盖全局。
组件1开启相对定位，遮罩开启固定定位(不一定是和这个例子相同的定位方式，这里举例)
由于组件1组件2组件3的 z-index:1，后面的组件会覆盖前面的。所以组件1中的遮罩出现时，覆盖不了组件2组件3，即使遮罩的z-index:999(理解为在组件1内部元素的层级中占比很高，但不影响组件1的层级)，但组件1和其他兄弟组件层级相同(父元素组件1都被覆盖了子元素肯定被一起覆盖)。


结构问题：遮罩需要遮住视图不应该作为组件123的子组件，如果必须这样写，解决办法是使用Portal 将组件渲染到指定位置

ReactDOM.createPortal(需要渲染的元素，传送到的指定位置)：渲染元素时将元素渲染到网页中的指定位置
1.在index.html中添加一个新的元素

<div id="root"></div>
<!--这个容器用来专门渲染遮罩层-->
<div id="backdrop"></div>

2.在组件中通过ReactDOM.createPortal()将元素渲染到新建的元素中

const backdropDOM = document.getElementById('backdrop');// 在其他组件内部正常使用Backdrop组件，但是该组件渲染时会被传送到专门渲染遮罩层的容器中渲染，会脱离原来的结构
const Backdrop = () => {return ReactDOM.createPortal(<div>{props.children}</div>,backdropDOM);
};

Fragment 组件

在React中，JSX必须有且只有一个根元素，这导致在某些情况需要添加一个额外的父元素(并没有实际意义)

  • React提供了Fragment组件，Fragment可以让你聚合一个子元素列表，并且不在DOM中增加额外节点
  • <></> 是Fragment的语法糖，<></> 语法不能接受键值或属性，但Fragment可以传递 key 属性
import React from 'react';const MyComponent = () => {return (<React.Fragment><div>我是组件1</div><div>我是组件2</div><div>我是组件3</div></React.Fragment>/*<><div>我是组件1</div><div>我是组件2</div><div>我是组件3</div></>*/);
};export default MyComponent;

Context 祖先组件向子孙组件传值

Context相当于一个公共的存储空间

创建content

// defaultValue存储的值
export const MyContext = React.createContext({name:xxx,age:xxx,
});

访问到Context中的数据

  • 方式1：通过Consumer标签来访问到Context中的数据(不常用)

    该组件内部必须使用函数，解析时会调用该函数，将创建的defaultValue作为该函数的参数传递。

    import React from 'react';
import { MyContext } from '../store/test-context';const MyContext = () => {return (<MyContext.Consumer>{(ctx)=>{ // 上述案例中的defaultValuereturn (<ul><li>{ctx.name}</li><li>{ctx.age}</li></ul>);}}</MyContext.Consumer>);
};
export default MyComponent;

  • 方式2：使用钩子函数useContext(context参数)获取到context，该钩子函数会返回Context中的数据

    import React, {useContext} from 'react';
import { MyContext } from '../store/test-context';const MyComponent = () => {const ctx = useContext(MyContext);return (<ul><li>{ctx.name}</li><li>{ctx.age}</li></ul>);
};export default MyComponent;

​ 一般不会将数据直接放在Context，因为这样写是死数据并且与state响应式数据没什么关系，不会触发组件的重新渲染。所以React还提供了Provider组件，用于在数据所在的组件中指定Context值。

import React from "react";
import MyComponent from "./component/MyComponent";
import { MyContext } from "./store/test-context";// 数据所在的组件
const App = () => {// 指定context的值return <MyContext.Provider value={{name:'猪八戒', age:28}}>/* Provider的子组件 */<MyComponent/>   </MyComponent.Provider>;
};export default App;

Provider设置在外层组件中，通过value属性来指定Context的值。这个Context值在所有的Provider子组件中都可以访问。Context的搜索流程类似vue的provide 和 inject。

Effect 副作用

组件每次重新渲染，组件的函数体就会执行。

有一部分逻辑如果直接写在函数体中，会影响到组件的渲染，这部分会产生“副作用”的代码，是不能直接写在函数体中。

例如，如果直接将修改state的逻辑编写到了组件之中，每次函数体执行设置基础值，state变量又引起组件的更新，就会导致组件不断的循环渲染，直至调用次数过多内存溢出。

setState()在函数组件中的执行流程

setState()会调用dispatchSetDate()方法，dispatchSetDate()方法的主要逻辑

  • 判断组件当前处于什么阶段(渲染阶段 |非渲染阶段 )

    • 处于渲染阶段：不会检查state值是否相同，在此时直接将setState设置的值放入渲染队列等待渲染

    • 处于非渲染阶段：检查setState设置的值与之前的值是否相同。如果值不同，对组件进行重新渲染；如果值相同，则不对组件进行重新渲染。

处于渲染阶段案例

const App = () => {const [count,setCount] = uesState(0);// 会触发Too many re-renders报错 // 调用的时候处于渲染阶段，因为div没有渲染到页面上，所以会引发重新渲染，再次调用组件函数。也就是说无限循环，不会退出渲染阶段。setCount(0); return (<div>{count}</div>)
}

处于非渲染阶段案例

第一次点击按钮count = 0 -> 1，组件重新渲染。

第二次点击按钮count = 1 -> 1，组件重新渲染。

第三次点击按钮count = 1 -> 1，组件没有重新渲染。

这是因为当值相同时，React在某些情况下(通常发生在值第一次相同时)会继续执行当前组件的渲染(这里指的时组件函数执行并更新页面)，这次渲染不会产生实际效果(这里应该仅重新执行组件函数并不更新页面，不触发刷新没有什么用？？)并且不会触发子组件的渲染。

const App = () => {const [count,setCount] = uesState(0);const clickHandler = ()=>{setCount(1); }return (<div onClick={ clickHandler }>{count}</div>)
}

React.StrictMode

脚手架自动生成的index.jx中使用了该组件，该组件表示react自身开启严格模式，开启后react会自动去检查组件中是否有副作用的代码(并不是很智能)。

root.render(<React.StrictMode><App/></React.StrictMode>
)

React的严格模式，在开发模式下，会主动重复调用一些函数，以使副作用出现。这些函数会被调用两次，如果安装了React Developer Tool，调试作用的第二次调用会显示为黑色。

  • 类组件的 constructor, render, 和 shouldComponentUpdate 方法
  • 类组件的静态方法 getDerivedStateFromProps
  • 函数组件的函数体
  • 参数为函数的setState
  • 参数为函数的useState, useMemo, useReducer

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

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

相关文章

不同品牌的手机如何投屏到苹果MacBook？例如小米、华为怎样投屏比较好？

不同品牌的手机如何投屏到苹果MacBook？例如小米、华为怎样投屏比较好？

习惯使用apple全家桶的人当然知道苹果手机或iPad可以直接用airplay投屏到MacBook。 但工作和生活的多个场合里&#xff0c;并不是所有人都喜欢用同一品牌的设备&#xff0c;如果同事或同学其他品牌的手机需要投屏到MacBook&#xff0c;有什么方法可以快捷实现&#xff1f; 首先…
阅读更多...
【GDB】

【GDB】

GDB 1. GDB调试器1.1 前言1.2 GDB编译程序1.3 启动GDB1.4 载入被调试程序1.5 查看源码1.6 运行程序1.7 断点设置1.7.1 通过行号设置断点1.7.2 通过函数名设置断点1.7.3 通过条件设置断点1.7.4 查看断点信息1.7.5 删除断点 1.8 单步调试1.9 2. GDB调试core文件2.1 设定core文件的…
阅读更多...
（五）五种最新算法（SWO、COA、LSO、GRO、LO）求解无人机路径规划MATLAB

（五）五种最新算法（SWO、COA、LSO、GRO、LO）求解无人机路径规划MATLAB

一、五种算法&#xff08;SWO、COA、LSO、GRO、LO&#xff09;简介 1、蜘蛛蜂优化算法SWO 蜘蛛蜂优化算法&#xff08;Spider wasp optimizer&#xff0c;SWO&#xff09;由Mohamed Abdel-Basset等人于2023年提出&#xff0c;该算法模型雌性蜘蛛蜂的狩猎、筑巢和交配行为&…
阅读更多...
iOS(swiftui)——系统悬浮窗( 可在其他应用上显示，可实时更新内容)

iOS(swiftui)——系统悬浮窗( 可在其他应用上显示，可实时更新内容)

因为ios系统对权限的限制是比较严格的，ios系统本身是不支持全局悬浮窗（可在其他app上显示）。在iphone14及之后的iPhone机型中提供了一个叫 灵动岛的功能，可以在手机上方可以添加一个悬浮窗显示内容并实时更新，但这个功能有很多局限性 如：需要iPhone14及之后的机型且系统…
阅读更多...
Java面试遇到的一些常见题

Java面试遇到的一些常见题

目录 1. Java语言有几种基本类型&#xff0c;分别是什么&#xff1f; 整数类型&#xff08;Integer Types&#xff09;&#xff1a; 浮点类型&#xff08;Floating-Point Types&#xff09;&#xff1a; 字符类型&#xff08;Character Type&#xff09;&#xff1a; 布尔类…
阅读更多...
（六）五种最新算法（SWO、COA、LSO、GRO、LO）求解无人机路径规划MATLAB

（六）五种最新算法（SWO、COA、LSO、GRO、LO）求解无人机路径规划MATLAB

一、五种算法&#xff08;SWO、COA、LSO、GRO、LO&#xff09;简介 1、蜘蛛蜂优化算法SWO 蜘蛛蜂优化算法&#xff08;Spider wasp optimizer&#xff0c;SWO&#xff09;由Mohamed Abdel-Basset等人于2023年提出&#xff0c;该算法模型雌性蜘蛛蜂的狩猎、筑巢和交配行为&…
阅读更多...
【完整项目】双模式答题卡识别软件中YOLO模式的训练部分详解，包括训练填涂区域和手写准考证号，手把手详细教学，可延申拓展训练其他图像数据

【完整项目】双模式答题卡识别软件中YOLO模式的训练部分详解，包括训练填涂区域和手写准考证号，手把手详细教学，可延申拓展训练其他图像数据

目录 前言1. 数据准备2. 数据标注3. 先跑起来Windows下用本地的CPU或GPU训练本地Windows系统连接服务器训练前言 前文：【完整项目】基于Python+Tkinter+OpenCV+Yolo+手写OCR的双模式答题卡识别软件的设计与实现 如果你需要训练自己的答题卡模型，那么请先看上面的文章链接。…
阅读更多...
Flutter自定义下拉选择框dropDownMenu

Flutter自定义下拉选择框dropDownMenu

利用PopupMenuButton和PopupMenuItem写了个下拉选择框&#xff0c;之所以不采用系统的&#xff0c;是因为自定义的更能适配项目需求&#xff0c;话不多说&#xff0c;直接看效果 下面直接贴出代码、代码中注释写的都很清楚&#xff0c;使用起来应该很方便&#xff0c;如果有任何…
阅读更多...
OpenSSL 编程指南

OpenSSL 编程指南

目录 前言初始化SSL库创建SSL 上下文接口(SSL_CTX)安装证书和私钥加载证书(客户端/服务端证书)加载私钥/公钥加载CA证书设置对端证书验证例1 SSL服务端安装证书例2 客户端安装证书创建和安装SSL结构建立TCP/IP连接客户端创建socket服务端创建连接创建SSL结构中的BIOSSL握手服务…
阅读更多...
Scrum

Scrum

Scrum是一个用于开发和维持复杂产品的框架&#xff0c;是一个增量的、迭代的开发过程。在这个框架中&#xff0c;整个开发过程由若干个短的迭代周期组成&#xff0c;一个短的迭代周期称为一个Sprint&#xff0c;每个Sprint的建议长度是2到4周(互联网产品研发可以使用1周的Sprin…
阅读更多...
【Linux】输出缓冲区和fflush刷新缓冲区

【Linux】输出缓冲区和fflush刷新缓冲区

目录 一、输出缓冲区 1.1 输出缓冲区的使用 1.2 缓冲区的刷新 1.3 输出缓冲区的作用 二、回车换行 一、输出缓冲区 C/C语言&#xff0c;当调用输出函数&#xff08;如printf()、puts()、fwrite()等&#xff09;时&#xff0c;会给我们提供默认的缓冲区。这些数据先存…
阅读更多...
虚拟机安装 hyper—v 沙盒

虚拟机安装 hyper—v 沙盒

一、下载系统镜像 1、确认电脑内存在8G及以上并提前准备完整的系统镜像 安装Hyper-V并重启电脑后打开程序选择虚拟机 选择安装位置并设置保留第一代的虚拟参数即可开始分配内存&#xff0c;根据自己的需求进行设置 右键虚拟机启动并开始运行&#xff0c;进行镜像系统的安装便完…
阅读更多...
牛客算法心得——环形数组的连续子数组最大和（dp）

牛客算法心得——环形数组的连续子数组最大和（dp）

大家好&#xff0c;我是晴天学长&#xff0c; 一个找连续子数组最大和的变形题&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1) .环形数组的连续子数组的最大和 描述 给定一个长度为 nn 的环形整数数组&…
阅读更多...
『 MySQL数据库 』聚合统计

『 MySQL数据库 』聚合统计

文章目录 前言 &#x1f951;&#x1f95d; 聚合函数&#x1f353; COUNT( ) 查询数据数量&#x1f353; SUM( ) 查询数据总和&#x1f353; AVG( ) 查询数据平均值&#x1f353; MAX( ) 查询数据最大值&#x1f353; MIN( ) 查询数据最小值 &#x1f95d; 数据分组GROUP BY子句…
阅读更多...
湖科大计网：计算机网络概述

湖科大计网：计算机网络概述

一、计算机网络的性能指标 一、速率 有时候数据量也认为是以10为底的&#xff0c;看怎么好算。&#xff08;具体吉大考试用什么待商榷&#xff09; 二、带宽 在模拟信号系统中带宽的含义&#xff0c;本课程中用到的地方是&#xff1a;香农定理和奈奎斯特定理公式的应用之中。 …
阅读更多...
全面高压化与全面超快充，破解新能源汽车的时代难题

全面高压化与全面超快充，破解新能源汽车的时代难题

是什么让新能源车主感到疲惫与焦虑&#xff1f;是什么阻挡更多消费者选择新能源汽车&#xff1f;我们在身边进行一个简单的调查就会发现&#xff0c;问题的答案非常一致&#xff1a;充电。 充电难&#xff0c;充电慢的难题&#xff0c;始终是困扰新能源汽车产业发展&#xff0c…
阅读更多...
每日一练【四数之和】

每日一练【四数之和】

一、题目描述 18. 四数之和 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] &#xff08;若两个四元组元素一一对应&#xff0c;则认为两个四元组重复&#x…
阅读更多...
基于ssm社区管理与服务的设计与实现论文

基于ssm社区管理与服务的设计与实现论文

目录 摘 要 1 Abstract 2 第一章 绪论 3 1.1研究背景 3 1.2 研究现状 3 1.3 研究内容 4 第二章 系统关键技术 5 2.1 Java简介 5 2.2 MySql数据库 5 2.3 B/S结构 6 2.4 Tomcat服务器 6 第三章 系统分析 7 3.1可行性分析 7 3.1.1技术可行性 7 3.1.2经济可行性 7 3.1.3运行可行性…
阅读更多...
uniapp自定义的日历（纯手写）

uniapp自定义的日历（纯手写）

效果图&#xff1a; html&#xff1a; <!-- 年月 --><view class"box"><view class"box_time"><view class"time"><image click"lefts" :src"url/uploads/20231206/9d1fb520b12383960dca3c214d84fa0…
阅读更多...
LLM之Agent（五）| AgentTuning：清华大学与智谱AI提出AgentTuning提高大语言模型Agent能力

LLM之Agent（五）| AgentTuning：清华大学与智谱AI提出AgentTuning提高大语言模型Agent能力

​论文地址&#xff1a;https://arxiv.org/pdf/2310.12823.pdf Github地址&#xff1a;https://github.com/THUDM/AgentTuning 在ChatGPT带来了大模型的蓬勃发展&#xff0c;开源LLM层出不穷&#xff0c;虽然这些开源的LLM在各自任务中表现出色&#xff0c;但是在真实环境下作…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023