React@16.x（26）useContext

本文主要是介绍React@16.x（26）useContext，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1，上下文的使用

之前的文章中介绍过 context上下文。

使用举例：

import React, { useState } from "react";const ctx = React.createContext();function Child() {return <ctx.Consumer>{(value) => <div>{value}</div>}</ctx.Consumer>;
}export default function App() {return (<ctx.Provider value="123"><Child></Child></ctx.Provider>);
}

2，useContext

在之前的做法中，有一些不舒服的点，一是增加了嵌套的层级；二是使用起来有点麻烦。

对比 useContext：

import React, { useContext } from "react";function Child() {const value = useContext(ctx);return <div>{value}</div>;
}

---

以上。

这篇关于React@16.x（26）useContext的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---