文章目录
- react学习笔记01
-
- 入门
-
- 概述
- [React 基础案例HelloWorld](#React 基础案例HelloWorld)
- JSX
-
- [JSX 解构数组](#JSX 解构数组)
- 创建react项目(手动)
- [创建React项目(自动) | create-react-app](#创建React项目(自动) | create-react-app)
- 事件处理
- React中的CSS样式
-
- [内联样式 | 内联样式中使用state (不建议使用)](#内联样式 | 内联样式中使用state (不建议使用))
- [外部样式表 | CSS Module](#外部样式表 | CSS Module)
- React组件
-
- 函数式组件和类组件
- [props 父组件给子组件传属性/方法](#props 父组件给子组件传属性/方法)
- [state 维护组件的响应式状态](#state 维护组件的响应式状态)
- [Ref 获取DOM对象](#Ref 获取DOM对象)
- 非受控组件与受控组件
-
- 数据的双向绑定
- [子组件给父组件传值 = props传递函数 + 子组件调用函数](#子组件给父组件传值 = props传递函数 + 子组件调用函数)
- vue中v-if与v-show的React写法
- [Portal 将元素渲染到指定位置](#Portal 将元素渲染到指定位置)
- [Fragment 组件](#Fragment 组件)
- [Context 祖先组件向子孙组件传值](#Context 祖先组件向子孙组件传值)
react学习笔记01
学习中get到的新用法
-
Date
类的toLocalString
方法,可以更为灵活的处理Date
类。 -
标签属性中闭包的使用
举例:仅在删除状态时使用id,不需要单独传递id属性。
jsconst logItemDate = logsData.map(item=> <LogItem onDelLog ={()=> delLog(item.id)}>)
-
移动端适配
rem + vw
可以使用
vw
获取视口宽度,将font-size
设置单位为vw
,然后结合rem
做适配。
1vw = 视口宽度的1%
->100vw = 视口的宽度
一般设置
html的font-size值 = 屏幕宽度/设计稿宽度
,但移动端比如375px
计算出的font-size
值小于12px
会造成一些错误和奇怪的问题,因此把比例扩大100倍
。为了使比例不变,相应的设计图元素使用时
设计图元素大小/100 rem
js根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.引入脚本
js
<script src="../script/react.development.js"></script>
<script src="../script/react-dom.development.js"></script>
2.创建一个React
元素
React.createElement(组件名/元素名,元素中的属性,元素的子元素/内容)
js
const reactDiv = React.createElement('div',{},'我是react创建的div');
3.获取根元素对应的React
元素
ReactDOM.createRoot(Dom元素);
js
// html
<div id="root"></div>
// js
const root = ReactDOM.createRoot(document.getElementById('root'));
4.将reactDiv
渲染到React
根元素中
JS
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
按钮,该按钮没有属性,内容为我是按钮。
声明式编程结果导向,告诉结果,不关系过程怎么样。
js
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
代码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
不是字符串,不需要加引号
js
const div = <div>我是一个div</div> // 正确写法
JSX
中html
标签应该小写开头,React
组件应该大写开头
js
<div> // 小写html标签
<Div> // 大写组件
-
JSX
有且只有一个根标签 -
JSX
的标签必须正常结束(自结束标签必须写/
)
js
const input = <input type="text" / >
- 在
JSX
中使用{}
嵌入表达式(有值的语句就是表达式)
js
const name = "ranran"
const div = <div>{name}</div> // 才会显示ranran,没有括号会把name识别为字符串
-
如果表达式值为空值、布尔值、undefined,将不会显示
-
在
JSX
属性可以直接在标签中设置- 事件绑定需要是一个函数,而不能直接是函数调用(绑定时就会被触发,不会延迟触发)
className
代替class
style
必须使用对象设置,属性名必须用驼峰命名法
js
const div = <div onClick="()=>{console.log('ranran')}"
style={{backgroundColor: "yellowgreen", border: '10px red solid'}}
></div> // 外面的大括号表示style必须使用对象设置,里面的对象表示给他设置的值是一个对象(有多个样式)
-
在语句中可以操作
JSX
jsconst 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在解构{}
的内容时,如果内容是数组则会自动将其展开。
js
//页面:孙悟空猪八戒沙和尚
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
值会按照顺序进行比较。
- 开发中一般会采用数据的
id
作为key
- 尽量不使用元素的
index
作为key
索引会跟着元素顺序的改变而改变,所以使用索引做key
跟没有key
是一样的。 唯一的不同就是,控制台的警告没了。 当元素的顺序不会发生变化时,用索引做key
也没有什么问题。
js
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打包,才能在浏览器中正常执行。
- 创建
React
js
根目录
- public(可以web直接访问的文件,不用打包就可以浏览器访问的静态资源)
- index.html (入口文件,必须有,首页模板打包时以此为模板生成最终的index/html | 添加标签 <div id="root"></div>)
- src(源码,JS源代码)
- index.js(必须,webpack打包文件的入口,该文件会被自动引入public/index.html中)
pnpm init
初始化项目,生成package.json
文件(大部分时候这一步可以省略)pnpm install react react-dom react-scripts
安装项目依赖- 编写代码
src/index.js
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);
- 运行项目
pnpm react-scripts build
打包项目,一般开发完成之后需要上线时使用该命令进行打包。
初次需要输入y确认。打包时需要默认配置,会询问是否添加默认配置。
正常情况,右键打开会报错。因为打包好的文件需要部署在服务器上运行,而不是直接使用浏览器打开。每次打包后路径都是这样需要手动修改。
-
pnpm react-scripts start
开发中使用的命令通过
webpack
启动内部的测试服务器,可以实时对更新代码进行编译。这个命令太长,可以在package.json
的scripts
选项中配置命令,下次可以使用命令pnpm start
。js"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
必须保留外,其他的东西都是可以删除的。
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
语法时需要传入一个函数作为事件处理函数。事件绑定需要是一个函数,而不能直接是函数调用(绑定时就会被触发,不会延迟触发,等于将函数的返回值给了该事件)js// 传统 HTML <button onclick="activateLasers()"> Activate Lasers </button> // React <button onClick={activateLasers}> Activate Lasers </button>
-
React
事件通过会传递事件对象event
,但其不同于原生的事件对象,是React
包装后的事件对象,该对象已经处理了跨浏览器的兼容性问题。React
中事件回调函数不能通过返回false
阻止默认行为,必须显式地使用event
事件对象的preventDefault
方法jsx// 传统 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
必须使用对象设置,属性名必须用驼峰命名法
js
const StyleDemo = () => {
return (
<div style={{color:'red', backgroundColor:'#bfa', fontSize:20, borderRadius:12}}>
我是Div
</div>
);
};
export default StyleDemo;
当样式过多,JSX
会比较混乱,可以使用变量去保存对象
js
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变量。
js
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引入的样式都是全局样式,其他组件也看得见这个样式。如果不同的样式表中出现了相同的类名,会出现相互覆盖情况。
js
import './index.css'
CSS Module
使用CSS Module
后,网页中元素的类名会自动计算生成并确保唯一。
如果引用同一个模块,计算出来的类名是相同的。
CSS Module
在React
中已经默认支持(前提是使用了react-script
)
- 文件样式的文件名为
xxx.module.css
- 在组件中引入样式的格式为
import xxx from './xxx.module.css'
- 设置类名时通过
xxx.yyy
的形式来设置
js
/*
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
普通函数
js
//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
js
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
元素
js
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})
// 写法2
this.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) }
的语法进行生成。
js
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
中可以获取到父组件中,子组件标签体内部的值。
js
// 父组件
<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变量不会触发组件的重新渲染。
JSX
import { useState } from 'React'
const [stateVariable,setStateFunction] = useState(1);
注意点
- 当
state
值是一个对象时,setState()
修改时,使用新的对象去替换已有对象。
js
const [user, setUser] = useState({name:"ranran",age:18})
user.name = "xxx";
serUser(user); // user是对象,对象的地址没有发生变化,所以不会引起组件重新渲染
/*
解决方案:将其拷贝给另一个新对象,修改新对象的属性
*/
setUser({...user,name:"xxx"}) // 后面的name会覆盖前面的name
-
通过
setState()
去修改一个state
时,并不表示修改当前的state
,修改的是组件下一次渲染的state
-
setState()
会触发组件的异步渲染(并不是马上调用就渲染,放入事件循环队列中等待执行),所以当调用setState()
需要使用state值时,可能出现计算错误。因为
setState()
修改的是下一次渲染的state
,如果下一次渲染还没进行前又调用了setState()
,此时state
还是旧值,所以就会出现计算错误。解决办法 : 通过传递回调函数的形式修改
state
回调函数的返回值会成为新的state值,回调函数执行时
React
会将最新的state
值作为参数传递。JSXsetCount(state => state+1); // 传递参数,React会保证参数的state是最新值
如果setState()
中需要用到旧值,参数都采用函数的形式。
Ref 获取DOM对象
Ref
是reference
的简写,用来获取真实DOM
的引用。
- 使用
useRef()
钩子函数获取DOM
对象- 1.通过
useRef()
钩子函数返回一个普通JS对象,React
会自动将DOM
对象传递到该对象的current
属性中。 - 2.被引用的DOM元素上添加
ref
属性,值为上述的对象。
根据描述,直接创建一个有current
属性的普通JS
对象可以实现相同的效果。
- 1.通过
两种方法的不同点
- 自定义对象方法,组件每次重新渲染,都会创建一个新对象
- 使用
useRef()
函数返回的对象的声明周期和组件的声明周期一致,所以每次重新渲染,该ref
对象都是原来的。
js
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
的值为新值。
js
import { useState } from 'react';
import './index.css';
const Demo = () => {
// 如果有多个表单,可以将表单数据设置为一个对象
const [inputValue, setInputValue] = useState('');
return (
<>
<input
type="text"
className="inputDemo"
value={inputValue}
onChange={e => {
setInputValue(e.target.value);
}}
/>
</>
);
};
export default Demo;
子组件给父组件传值 = props传递函数 + 子组件调用函数
- 在父组件中,使用
props
给子组件传递一个自定义事件 - 在子组件中将需要传递的数据作为函数参数,调用函数
js
// 父组件
<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
可以使用&&
js
// 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
中添加一个新的元素
js
<div id="root"></div>
<!--这个容器用来专门渲染遮罩层-->
<div id="backdrop"></div>
2.在组件中通过ReactDOM.createPortal()将元素渲染到新建的元素中
js
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
属性
js
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
js
// defaultValue存储的值
export const MyContext = React.createContext({
name:xxx,
age:xxx,
});
访问到Context中的数据
-
方式1:通过
Consumer
标签来访问到Context
中的数据(不常用)该组件内部必须使用函数,解析时会调用该函数,将创建的
defaultValue
作为该函数的参数传递。jsimport React from 'react'; import { MyContext } from '../store/test-context'; const MyContext = () => { return ( <MyContext.Consumer> {(ctx)=>{ // 上述案例中的defaultValue return ( <ul> <li>{ctx.name}</li> <li>{ctx.age}</li> </ul> ); }} </MyContext.Consumer> ); }; export default MyComponent;
-
方式2:使用钩子函数
useContext(context参数)
获取到context
,该钩子函数会返回Context
中的数据jsimport 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
值。
js
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
。