Context
Context的用法类似
redux
中将store
注射到全局中,以便其包裹的组件可以使用其储存的数据方法。我们常用其做国际化和全局的主题颜色等,但并不用于发布订阅和状态的管理。
Context的用法
我们先在一个文件中使用react
的createContext
创建一个context
,参数为默认的context
值,如果使用到context
却没有被Provider
包裹时,取到的context
值就是这个默认值。
import React from "react";
export const myContext = React.createContext("默认值");
在app
中定义context
的值,并注射到需要使用该值得父组件中。在本🌰中我们用context
实现一个增加列表的功能。
export default class App extends React.Component {
constructor() {
super();
this.state = {
context: {
list: [],
add: (e) => {
this.setState({
context: {
...this.state.context,
list: [
...this.state.context.list,
{ value: e, key: new Date().getTime() },
],
},
});
},
},
};
}
render() {
const { context } = this.state;
return (
<>
<myContext.Provider value={context}>
<Add />
<List />
<Show />
</myContext.Provider>
</>
);
}
}
在子组件中有两种方式获取到context
的值,一种是指定该组件的contextType,一种是直接使用<Context.Consumer>
API。增加列表的组件代码如下
import React from "react";
import { myContext } from "../context";
export default class Add extends React.Component {
//static contextType = myContext; //由于是静态方法,也可以使用这种方法
constructor(props) {
super(props);
this.state = {
value: "",
};
}
render() {
const { value } = this.state;
return (
<>
<input
value={value}
onChange={(e) => this.setState({ value: e.target.value })}
/>
<button onClick={this.btnClick}>添加+</button>
</>
);
}
btnClick = () => {
this.context.add(this.state.value);
this.setState({ value: "" });
};
}
Add.contextType = myContext;
接下来,在list
组件中遍历context
中的list数组即可。
import React from "react";
import { myContext } from "../context";
export default class List extends React.Component {
render() {
const context = this.context;
return (
<>
{context.list.map((itme) => (
<li key={itme.key}>{itme.value}</li>
))}
</>
);
}
}
List.contextType = myContext;
这样一个简单的增加列表的功能就实现了,我们没有用父子组件传值的方式,也没有借助发布订阅的模式就能实现。但是React
并不建议我们使用这种方法,这是为什么呢?
我们在包裹context
值的父组件下面定义一个新的组件show,在show
中我们并不使用context
中的值。
export default class Show extends React.Component {
render() {
console.log("show组件执行了render :>> ");
return <h1>这里是Show组件</h1>;
}
}
我们输入input
框的值并点击增加按钮,查看控制台:
我们可以看到,每一次context
中value
的值改变了,其list
组件确实更新了,但是并没有用到context
的show
组件也重新渲染了,这显然不是我们想要的结果。也就是说只要context
的值发生了改变,那么所有被包裹的子组件都会渲染,因此我们并不使用context
进行状态管理等数据操作;而主题颜色、国际化等操作并不会经常改变,我们为了避免父子组件需要层层传递麻烦的问题,可以使用context进行传递。
另一种使用context的方法 Consumer
我们把show组件移到myContext.Provider
的外面,并将show组件变为函数式组件,直接在需要使用context
的地方用context.Consumer
组件进行包裹就可以了。顾名思义,就是消费context
的地方。值得注意的是,如果使用了Consumer
进行包裹,就一定要写{value => /* 基于 context 值进行渲染*/}
这样的形式,否则就会报错。
import React from "react";
import { myContext } from "../context";
export default function Show() {
return (
<myContext.Consumer>
{(value) => {
console.log("value :>> ", value);
return <h1>这里是show组件</h1>;
}}
</myContext.Consumer>
);
}
上面代码中,我们没有将show
组件放在<myContext.Provider>
父组件下,那么打印的value
值是什么呢?
可以看到,打印的value值就是我们在使用createContext
创建context时添加的默认值,注意,这个值不能是undefined
,否则消费组件的 defaultValue
不会生效。我猜测的原因:因为React
不会渲染undefined类型的数据,所以添加默认值为undefined
没有什么意义。
export const myContext = React.createContext("默认值");
总的来说,在class的组件中,我们使用context
用以上两种方式都可以,在函数式组件中使用Consumer
的方式。
Portals的作用
官网对Portal的说明:Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。
第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 fragment。第二个参数(container)是一个 DOM 元素。
由于react是单页面应用,每个组件都是在根节点下包裹的,那么我们在写一些弹出框是就会遇到样式的问题,比如不知道z-index
该设置为多少合适。Portals
就是官方给我们提供的将组件渲染到存在于父组件以外的 DOM 节点之上。
我们来看一个modal
弹框的🌰,
在项目的HTML
文件中新建一个div
,id
为modal
:
<div id="root"></div>
<div id="modal"></div>
新建一个modal文件,创建我们的modal组件样式和逻辑:使用createPortal创建Portals,第一个参数是需要渲染的元素,第二个参数是DOM节点。具体代码如下
import React from "react";
import ReactDom from "react-dom";
export default class Modal extends React.Component {
constructor() {
super();
this.domNode = document.querySelector("#modal");
this.modalNode = document.createElement("div");
this.modalNode.style =
"width: 100%;height: 100%;background-color: rgba(0, 0, 0, .7);position: fixed; top: 0;left: 0";
}
componentDidMount() {
this.domNode.appendChild(this.modalNode);
}
render() {
return ReactDom.createPortal(
<div
style={{
position: "fixed",
height: "400px",
width: "500px",
top: "50%",
left: "50%",
transform: "translate(-50%,-50%)",
textAlign: "center",
lineHeight: "400px",
background: "red",
}}
>
我是modal弹窗
</div>,
this.modalNode
);
}
componentWillUnmount() {
this.domNode.removeChild(this.modalNode);
}
}
在挂载阶段将组件添加到modal
节点中,在卸载阶段移除。接下来在App
文件中引入modal
组件,刷新页面,modal
就被渲染出来了。
查看控制台,我们可以清晰的看到,modal
组件并没有渲染在root节点下,而是在我们创建的modal
节点下,这样我们给弹出框设置样式就变得容易了。需要值得注意的是,尽管Portals不在其父组件的DOM树下,但是 portal 仍存在于 React 树中,因此它像 context 这样的功能特性都是不变的,而事件冒泡也依旧会在,会一直冒泡至包含 React 树的祖先。
最后在App
组件中加入控制modal
是否展示的逻辑,就可以实现modal
的弹出与隐藏了,在这里就不在赘述。
由于笔者还是个前端小萌新,难免会有纰漏错误,欢迎大佬们进行指点!