学习钩子=赚钱！
让我们跳入！
哦，等等，什么是钩子？
“钩子是React 16.8中的一个新添加。它们让您使用状态和其他React功能而不编写类”
老实说，您绝对最好在那里学习挂钩，但是如果您更喜欢更多的选择，无BBS的精神，请继续阅读！
好吧，让我们赚钱！
所有示例的代码都可以在此Code Sandbox中找到。
这是覆盖OG钩的三部分系列的第1部分。 usestate ，使用效果和 usecontext ！ð
美国州
-
useState钩用于在应用程序中存储和更新动态数据，即“状态”。 - 创建一个状态变量和一个函数以更新上述状态值：
const [state, setState] = useState(initialState);
- 更新状态变量的值：
setState(newState);
- 示例：
// /src/UseStateExample.js
import { useState } from "react";
export default function UseStateExample() {
const [counter, setCounter] = useState(0);
return (
<div className="UseStateExample">
<h1>Dinero!</h1>
<h2>You have {counter} 💵</h2>
<button onClick={() => setCounter(counter + 1)}>Get 1 $</button>
</div>
);
}
- 在上面的示例中，
- 使用
useState钩将状态变量counter初始化为0。 - 单击按钮时，setter函数
setCounter运行并将counter的值递增为1。
- 使用
- 在here和此sandbox上的代码中看到它！
使用效率
-
useEffect钩采用回调函数和一个可选的依赖项数组，如参数。 - 当指定的依赖项数组中的任何变量的值更改时，它用于在回调函数内运行一些逻辑。
- 如果依赖项数组为空，则在启动组件时，该函数一次运行一次。
- 如果您需要在卸载组件之前运行一些逻辑，则可以通过返回从回调到
useEffect的函数来完成。 - 示例：
// /src/UseEffectExample.js
import { useEffect, useState } from "react";
export default function UseEffectExample() {
const [counter, setCounter] = useState(0);
useEffect(() => {
if (counter >= 1000000) {
alert("Congratulations! You're a Millionaire");
}
}, [counter]);
return (
<div className="UseEffectExample">
<h1>Dinero!</h1>
<h2>You have {counter} 💵</h2>
<button onClick={() => setCounter(1000000)}>Become a Millionaire!</button>
</div>
);
}
usecontext：
- React的上下文API 允许您在组件之间共享数据，而不必将其降低层次结构，即不必将数据传递到每个子组件。
useContext钩让我们可以做到这一点。 - 我们可以在顶级组件中创建上下文：
const CashContext = createContext("one million dollars");
- 我们可以将儿童组件包裹在提供商中，他们将可以访问该值：
function App(props) {
return (
<CashContext.Provider value={"one million dollars"}>
<ChildComponent1 />
</CashContext.Provider>
);
}
- 然后，我们可以使用
useContext挂钩在n级子组件内部的子部件中访问传递给提供者的值：
function ChildComponent1(props) {
return (
<div>
<ChildComponent2 />
</div>
);
}
function ChildComponent2() {
const cash = useContext(CashContext);
return (
<div>{cash}</div>
);
}
- 注意：下面的示例说明了如何使用上下文访问和更新来自儿童组件的值，这是一个非常有用的模式。
- 示例：
// /src/context/emojiContext.js
import { createContext } from "react";
export const emojis = {
"heavy-dollar-sign": "💲",
"dollar-banknote": "💵",
"money-bag": "💰"
};
export const EmojiContext = createContext({
emoji: emojis["heavy-dollar-sign"],
setEmoji: () => {}
});
// /src/App.js
import "./styles.css";
import { useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { emojis, EmojiContext } from "./context/emojiContext";
import UseContextExample from "./UseContextExample";
export default function App() {
const [emoji, setEmoji] = useState(emojis["heavy-dollar-sign"]);
const emojiValue = { emoji, setEmoji };
return (
<div className="App">
<EmojiContext.Provider value={emojiValue}>
<BrowserRouter>
<Routes>
<Route path="use-context" element={<UseContextExample />} />
</Routes>
</BrowserRouter>
</EmojiContext.Provider>
</div>
);
}
// /src/UseContextExample.js
import { emojis, EmojiContext } from "./context/emojiContext";
import { useContext } from "react";
export default function UseContextExample() {
const { emoji, setEmoji } = useContext(EmojiContext);
const getRandom = () => {
if (emoji === emojis["heavy-dollar-sign"]) {
return emojis["money-bag"];
} else {
return emojis["heavy-dollar-sign"];
}
};
return (
<>
<h1>Dinero!</h1>
<h2>You have {emoji}</h2>
<button onClick={() => setEmoji(getRandom())}>
Click to get something else
</button>
</>
);
}
- 在上面的示例中：
- 我们在
emojiContext.js中创建上下文并导出它。 - 将其导入
App.js并包裹儿童组件内部。 - 传递给提供商的“值”是状态变量和设置器函数。
- 在
UseContextExample.js中，我们使用useContext钩访问和更新值。
- 我们在
- 在here的emojiContext.js中看到它，该代码是emojiContext.js，App.js和UseContextExample.js的Sandbox！
希望这很有趣，现在您现在就睡在一堆现金上！
请关注第2部分和第3部分，在这里我们查看更多钩子¶
欢呼！