Hook是React 16.8 的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性。
hooks-useState
返回一个 state,以及更新state的函数。
App.js
import React, { useState } from "react";
export default function App() {
// 定义count和count的默认值和修改count的方法
const [count, setCount] = useState(15);
return (
<div>
<button
onClick={() => {
setCount((preCount) => preCount + 1);
}}
>
+
</button>
<p>当前数是:{count}</p>
</div>
);
}
useEffect
该 Hook 接收一个包含命令式、且可能有副作用代码的函数。
App.js
import React, { useEffect } from "react";
export default function App() {
useEffect(() => {
console.log("1111");
console.log(document.querySelector('span'))
});
return (
<div>
<span></span>
</div>
)
}
useContext
接收一个 context 对象并返回该context的当前值。
context/index.js
import { createContext } from "react";
export const moneyContext = createContext(200)
App.js
import React, { useState } from "react";
import { moneyContext } from "./context";
import Father from "./Father";
export default function App() {
const [money] = useState(2000);
return (
<div>
<moneyContext.Provider value={money}>
<Father></Father>
</moneyContext.Provider>
</div>
);
}
Father.js
import React from 'react'
import Son from './Son'
export default function Father() {
return (
<div>
<Son></Son>
</div>
)
}
Son.js
import React,{useContext} from 'react'
import {moneyContext} from './context'
export default function Son() {
const money = useContext(moneyContext)
return (
<div>
{money}
</div>
)
}