1.Hooks的含义
Hooks”的单词意思为“钩子”。React Hooks 的意思是,组件尽量写成纯函数,如果需要外部功能和副作用,就用钩子把外部代码“钩”进来。而React Hooks 就是我们所说的“钩子”。
那么Hooks要怎么用呢?“你需要写什么功能,就用什么钩子”。对于常见的功能,React为我们提供了一些常用的钩子,如果有特殊需要,我们也可以写自己的钩子。下面是React Hooks为我们提供的常用的钩子:
useState()
useContext()
2.hooks之useState()
首先,我们创建一个react项目
create-react-app hooks
直接上代码 我这里是直接写在app.js里的
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.hooks之useContext()
接着上面代码写,在src下面建一个demo文件夹
app.js 里先共享数据给子组件Demo
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>
);
}
在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>
)
}
注意,我们在使用rfc快捷生成函数组件式的时候,index为首字母是小写,这里我们要改为大写,因为我们生成的是组件,不是函数,所以要大写。
4.hooks之useEffect()
简单的理解就是
useEffect 代替常用的生命周期函数 —— componentDidMount和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()