责任编辑产品目录
甚么是 Web3 化学反应？
为甚么采用 Web3-react 可能将是两个更快的点子？
加装 web3-react
相连手提包第 1 步：增设 Web3ReactProvider第 2 步：增设挂勾
合约中的随机存取高度计诗歌创作
甚么是 Web3-React？
Web3-react 是两个如前所述 React 的架构，有利于精简 dApp 的后端合作开发。
Web3-react 还甘当自动机，用作保护与您的 dApp 有关的统计数据，并将其转化成模块根上任何人须要的边线。Web3-React 全力支持多种不同手提包，从 Metamask 和 Coinbase 等应用程序手提包到 Trezor 和 Ledger 等硬体手提包。
在 Web3 中，我们采用 Web3-Modal 在 dApp 中进行手提包相连。Web3-模态非常适合初学者，但随着我们扩展项目，处理 Web3-模态变得更加困难。
因此，web3-react 可能将是两个更快的选择，因为：
更适合构建现代 dApp
拥有更快的合作开发人员体验
减少代码冗余
并且是两个直观的架构，可以采用
为甚么采用 Web3-react 可能将是两个更快的选择？
Web3-React 在许多方面提供了灵活性。如前所述，它对许多手提包都有很好的全力支持。
但即使手提包不包含在 web3-react 包中，您也可以创建自定义相连器并相连 web3-react 列出的手提包以外的手提包！
Web3-react 在引擎盖下采用以太币.js或 Web3.js从而提供流畅的体验，因为仅采用以太币相连手提包.js可能将是两个非常痛苦的过程。
注意：在继续之前，请确保您了解 ContextAPI，换句话说，采用上下文钩子。这是 Web3-React 的关键功能。
加装 web3-react
在责任编辑中，我们假设您已经增设了 ReactJS/NextJS 应用程序。
在您的应用产品目录中，运行以下命令以加装 web-react：
npm install @web-react/core
yarn add @web3-react/core
现在，为了相连如前所述应用程序的手提包，我们须要加装以下 web3-react 包：
npm install @web3-react/injected-connector
yarn add @web3-react/injected-connector
和。您拥有将dApp相连到应用程序手提包所需的所有成分！让我们开始编写代码来相连手提包！
相连手提包
本部分假定你已创建应用并加装了以前的依赖项。现在它已经解决了，让我们直接进入这个！
第 1 步：增设Web3ReactProvider
让我们跳到文件夹下的（下一步）文件！_app.jspages
import ../styles/globals.cssimport { Web3ReactProvider } from @web3-react/coreimport { providers, Web3Provider } from ethersfunction getLibrary(provider, connector) { return new providers.Web3Provider(provider)}function MyApp({ Component, pageProps }) { return( <Web3ReactProvider getLibrary={getLibrary}> <Component {…pageProps} /> </Web3ReactProvider> )}export default MyApp
function getLibrary(provider, connector) { return new providers.Web3Provider(provider)}
Web3ReactProvider 是上下文提供程序，它将所有统计数据传递到模块根上。
function MyApp({ Component, pageProps }) {return ( <Web3ReactProvider getLibrary={getLibrary}> <Component {…pageProps} /> </Web3ReactProvider> )}
第 2 步：增设挂勾
现在让我们跳到您的文件夹中。index.jspages
import Head from next/headimport Image from next/imageimport styles from ../styles/Home.module.cssimport { InjectedConnector } from @web3-react/injected-connectorimport { useWeb3React } from @web3-react/coreimport { useState } from reactimport { CONTRACT_ADDRESS, CONTRACT_ABI } from ../constantsexport default function Home() { const [ result, setResult ] = useState(“”) // web3-react hook, helps in fetching // the data passed by Web3ReactProvider const { active, activate, deactivate, account, library, connector, error } = useWeb3React() // injected provider identifier const injected = new InjectedConnector( { supportedChainIds:[80001] } ) const connectWallet = async () => { try { await activate(injected) } catch (err) { console.error(err) } } const disconnectWallet = async () => { try { deactivate(injected) } catch (err) { console.error(err) } }return ( <div className={styles.container}> <Head> <title>Create Next App</title> <meta name=”description” content=”Generated by create next app” /> <link rel=”icon” href=”/favicon.ico” /> </Head> <button onClick={connectWallet}>Connect Wallet</button> {active? <span>Connected with <b>{account}</b></span>: <span>Not Connected</span>} <button onClick={disconnectWallet}>Disconnect Wallet</button> </div> )}
好的，现在让我们看看 useWeb3React hook
const { active, activate, deactivate, account, library, connector, error } = useWeb3React()
useWeb3React是来自 Web-React 库的自定义钩子，它返回了许多有用的功能。
此钩子返回：
connector; // connector object returns some useful connection // methods like activate() and deactivate() library; // library is the provider object that we // passed with the Web3ReactProvider chainId; // returns the chainId for the account that // is connected to the dApp account; // the account address of the connected account active; // active is a state variable which returns boolean values // that determines whether the wallet connection is // active or inactive error; // returns any error happening with the wallet connection
const injected = new InjectedConnector({ supportedChainIds:[80001]})// we can list multiple networks by listing their// chainIds, separated by comma
转化成相连器是两个类，它接受全力支持的 chainIds 的输入并返回一组与应用程序手提包交互的方法。
如果手提包未相连到正确的网络，它将返回错误。可以从挂勾返回的对象访问此错误。UnsupportedChainIderroruseWeb3React
至于 和 ，它们是相连或断开转化成的提供程序（应用程序手提包）的方法。activate(injected)deactivate(injected)
合约中的随机存取
现在我们已经相连了我们的手提包，剩下的就是读取和写入区块链的方式！
我们将采用 web3-react （provider） 对象从区块链读取/写入library
因此，我们将采用在LearnWeb3DAO的新生轨道中构建
在我们深入研究之前，请确保您已在文件夹（在根产品目录中）中创建了两个，并且它应该具有以下代码 –index.jsconstants
// put your contract address in place of this gibberishexport const CONTRACT_ADDRESS = “0xabcabcabcabcabcabc”;// put your abi in this variable, it will be of the form [{},{}]export const CONTRACT_ABI = […]
高度计
const getMood = async () => { const provider = library; const contract = new Contract( CONRTACT_ADDRESS, CONTRACT_ABI, provider ); const tx = await contract.getMood(); tx.wait(); setResult(tx); }
我们将变量增设为 .请记住，是从钩子返回的，它是两个提供程序对象。很方便，不是吗？providerlibrarylibraryuseWeb3React
然后，我们创建两个新的合约实例，这使我们能够与合约进行交互。
现在是时候创建交易了！我们在这里从合约调用 getMood（） 函数。
tx.wait()等待事务完成。
setResult(tx)将状态变量的值增设为 的值。resulttx
诗歌创作
const setMood = async ( mood ) => { const signer = await library.getSigner() const contract = new Contract( CONRTACT_ADDRESS, CONTRACT_ABI, signer ) const tx = await contract.setMood(mood) tx.wait() alert(“Mood set!”) }
library是两个提供程序对象，但我们须要两个签名者，对吧？好吧，提供程序对象具有两个名为的方法，该方法返回附加到此提供程序的签名者对象！getSigner()
这是两个合约实例，但在这里，我们传递的不是提供者，而是签名者，因为为了编写事务，我们须要签名者来签署事务。contract
最后，我们现在向合约函数传递了两个参数，因为来自合约的函数须要两个参数来增设情绪。
您已经采用 web3-react制作了两个 dApp 后端！它也可以在区块链上读取和写入！
结论
Web3-react 是两个非常方便的架构，用作在 React/NextJS 中构建 dApp 后端。
这是两个非常易于采用的工具，但对于初学者来说可能将会令人困惑。要采用此工具，您可能将须要一些上下文 API 知识。
Web3 是未来世界一大变数，我想帮助更多人了解并加入 Web3，如果你对 Web3 感兴趣，记得关注我~
