1. The meaning of Hooks
The word "Hooks" means "hook". React Hooks means that components should be written as pure functions as much as possible. If external functions and side effects are needed, hooks should be used to "hook" the external code in. And React Hooks is what we call "hooks" ".
So how to use Hooks? "Whatever function you need to write, use whatever hook". For common functions, React provides us with some commonly used hooks. If there are special needs, we can also write our own hooks. The following are commonly used hooks provided by React Hooks:
useState()
useContext()
2. useState() of hooks
First, we create a react project
create-react-app hooks
Go directly to the code, I wrote it directly in app.js here
import React, {
useState, createContext } from "react";
import Demo from "./demo";
// useState-------
export default function App() {
// useState 相当于 状态管理器
// useState（） 函数
// const [状态对象, set设置状态对象] = useState(状态对象初始值);
//可以存储一个值
const [count, setCount] = useState(0);
//也可以存储一个对象或者数组
const [arr, setArr] = useState({
name: "zs",
age: 18,
});
//count+1的方法
const add = () => {
setCount(count + 1);
};
return (
<div>
<div>计数器：{
count}次</div>
<button onClick={
add}>+1</button>
</div>
);
}
3. useContext() of hooks
Then write the above code, build a demo folder
app.js under src and share the data with the sub-component Demo first
import React, {
useState, createContext } from "react";
import Demo from "./demo";
// createContextAPI对象
// const context变量名称 = createContext();
//这里要使用export导出，不然子组件不能引用context
export const context = createContext();
export default function App() {
const [count, setCount] = useState(0);
const [arr, setArr] = useState({
name: "zs",
age: 18,
});
const add = () => {
setCount(count + 1);
};
return (
<div>
<div>计数器：{
count}次</div>
<button onClick={
add}>+1</button>
{
/* 共享数据 把count的值共享给Demo组件 */}
<context.Provider value={
count}>
<Demo></Demo>
</context.Provider>
</div>
);
}
Receive data in Demo
import React ,{
useContext}from 'react'
//引入 const context = createContext();
import {
context} from '../App'
export default function Index() {
//接收context的数据给con
const con = useContext(context);
return (
<div>接受父组件的{
con}数据</div>
)
}
Note that when we use the rfc shortcut to generate a function component, the first letter of the index is lowercase. Here we need to change it to uppercase, because what we generate is a component, not a function, so we need to capitalize.
4. useEffect() of hooks
The simple understanding is that
useEffect replaces the commonly used life cycle functions - componentDidMount and componentDidUpdate
import React, {
useState, createContext, useEffect } from "react";
import Demo from "./demo";
export const context = createContext();
export default function App() {
const [count, setCount] = useState(0);
const [arr, setArr] = useState({
name: "zs",
age: 18,
});
const add = () => {
setCount(count + 1);
};
// useEffec函数代替声明周期函数---componentDidMount和componentDidUpdate
// 使用useEffect时候有两点需要注意的
// （1）React首次渲染和之后的每次渲染都会调用一遍useEffect函数，而之前我们要用
// 两个生命周期函数分别表示首次渲染(componentDidMonut)和更新导致的重新渲染
// (componentDidUpdate)。
// （2）useEffect中定义的函数的执行不会阻碍浏览器更新视图，也就是说这些函数时异
// 步执行的，而componentDidMonut和componentDidUpdate中的代码都是同步执行
// 的。个人认为这个有好处也有坏处吧，比如我们要根据页面的大小，然后绘制当前弹出
// 窗口的大小，如果时异步的就不好操作了
useEffect(() => {
console.log(`useEffect=>点击第 ${
count} 次`);
});
return (
<div>
<div>计数器：{
count}次</div>
<button onClick={
add}>+1</button>
{
/* 共享数据 */}
<context.Provider value={
count}>
<Demo></Demo>
</context.Provider>
</div>
);
}
UseEffect() is triggered when the data changes
