一、React介绍
温馨提醒：想要获取更好的观看效果，可以点击查看本篇文章的原文档(React-Hook快速入门（一） (notion.so)
react是基本的页面渲染库，基于不同的平台有
- react-dom: 浏览器
- react-native: app环境
- react-vr: vr平台
二、为什么要使用React-Hook
在React-Hook诞生之前，React通常使用class作为组件。而function只能作为受控组件，它本身是没有自己的状态（state),只能通过接受props来被动渲染。引入React-Hook后，函数组件可以通过useState来拥有自己的状态；useEffect整合了各类生命周期，使得代码逻辑更清晰；自定义hook使得代码更容易复用。以下是官网对于React-Hook的介绍。
简而言之，hook主要解决了以下的一些问题：
- 大型组件很难拆分和重构，也很难测试。
- 业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑。
- 组件类引入了复杂的编程模式，比如 render props 和高阶组件。
核心思想：组件的最佳写法应该是函数，而不是类。React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。
三、useState
基本用法
const [state, setState] = useState(initValue)
useState使React函数组件拥有了状态。
- 括号里的initValue是state的初始值。
- 数组解构的第一个参数是最新的state值，每次state的值得改变将触发页面重新渲染。
- 数组解构的第二个参数是state的更新函数，通过给setState(newState)传递参数newState来改变状态值（state),并引发页面的重新渲染。
import React, { useState } from 'react';
const Example = () => {
// 声明一个叫 "count" 的 state 变量
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
setState是同步还是异步？
[图片上传失败...(image-8c34b3-1621553852262)]
https://codesandbox.io/s/agitated-flower-9lhi2?file=/src/App.tsx:0-570
在执行增加num（state值）的前后打印num，发现打印的结果均是0而不是最新值1，似乎setState是一个异步操作？
import { useState } from "react";
import "./styles.css";
export default function App() {
const [num, setNum] = useState(0);
const addNum = () => {
console.log("执行setNum之前", num);
setNum(num + 1)
console.log("执行setNum之后", num);
};
return (
<div className="App">
<h1>setState是同步还是异步的？</h1>
<p>数字：{num}</p>
<button onClick={addNum}>增加</button>
</div>
);
}
接着将代码更改如下,在点击增加按钮的回调函数中一次性调用两次setNum，结果发现页面上显示的数字是1而不是2。这是什么情况呢？
import { useState } from "react";
import "./styles.css";
export default function App() {
const [num, setNum] = useState(0);
const addNum = () => {
console.log("执行setNum之前", num);
setNum(num + 1)
console.log("执行setNum之后", num);
};
return (
<div className="App">
<h1>setState是同步还是异步的？</h1>
<p>数字：{num}</p>
<button onClick={addNum}>增加</button>
</div>
);
}
这是因为在执行了setNum函数后，React并不会立马去更新num。这样在连续第二次调用setState时，num值仍然为0，因此连续调用两次setNum后最新结果是1。React这样做的目的是，连续多次的调用setState会合并state，而不是立马去更新state，这样就不会导致页面在短暂时间进行多次渲染，从而节省了页面开销。
那么我想连续调用两次，而且最终结果显示为2，该怎么实现？这个时候可以使用函数式更新
函数式更新
通过在useState传入一个函数，该函数的参数state即为更新之前的state值，通过在这个函数中执行两次num + 1的操作，最后返回的state将会比先前值+2，这样保证了状态的一致性，也验证了setState本身是一个同步函数，只是它的状态更新机制像一个异步函数！
import { useState } from "react";
import "./styles.css";
export default function App() {
const [num, setNum] = useState(0);
const addNum = () => {
console.log("执行setNum之前", num);
setNum((state) => {
state += 1;
state += 1
console.log("执行setNum的时候", state);
return state;
});
console.log("执行setNum之后", num);
};
return (
<div className="App">
<h1>setState是同步还是异步的？</h1>
<p>数字：{num}</p>
<button onClick={addNum}>增加</button>
</div>
);
}
惰性初始化
useState可以存字符串、数值等基本类型，也可以存数组、字符串等引用类型。那么可不可以存函数呢？
https://codesandbox.io/s/usestateduoxingchushihua-jthil?file=/src/App.tsx
通过callback存入一个函数，在点击更改函数按钮时，变更存储的函数；在点击执行函数按钮时，调用存入的函数。然而结果并不是像我们期望的那样。在初始化state和点击更改函数按钮时，都自动执行了存入的函数！原因是React的useState有着惰性初始化的特性
import { useState } from "react";
import "./styles.css";
export default function App() {
const [callback, setCallback] = useState(() => {alert('init')})
return (
<div className="App">
<h1>useState惰性初始化</h1>
<button onClick={() => {setCallback(() => {alert('change')})}}>更改函数</button>
<button onClick={callback}>执行函数</button>
</div>
);
}
传入函数给useState，React并不会认为你要存的是一个函数。相反他会认为这是一个非常消耗性能的计算state的操作，他会立即去执行还函数，并将该函数的返回值作为新的state。
那么useState如何存一个函数呢？
其实很简单，只要将上述代码修改如下即可。
import { useState } from "react";
import "./styles.css";
export default function App() {
const [callback, setCallback] = useState(() => () => {alert('init')})
return (
<div className="App">
<h1>useState惰性初始化</h1>
<button onClick={() => {setCallback(() => () => {alert('change')})}}>更改函数</button>
<button onClick={callback}>执行函数</button>
</div>
);
}
四、useEffect
基本用法
useEffect(() => {
// do some effect function
}, [dependence]);
在DOM更新完毕之后执行副作用函数，可以取代class的生命周期函数。
- 当没有依赖项，会在组件每次更新后执行
- 依赖项为空数组：会在组件挂载和卸载时执行
- 依赖项为变量时，会在这些变量改变后才执行
清除effect
通常，组件卸载时需要清除 effect 创建的诸如订阅或计时器 ID 等资源。要实现这一点，useEffect 函数需返回一个清除函数。
https://codesandbox.io/s/wispy-frog-bb3wp?file=/src/App.tsx
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
export default function Test() {
const [num, setNum] = useState<number>(0);
useEffect(() => {
console.log("在return之后执行");
return () => {
console.log("return先执行");
};
}, [num]);
return (
<div>
<h2>Test测试页面</h2>
<Link to="/other">前往Other</Link>
<p>数字：{num}</p>
<button
onClick={() => {
setNum(num + 1);
}}
>
增加
</button>
</div>
);
}
- React会在第一次渲染时执行useEffect中的函数，韩是不会执行return。
- effect 在之后的每次渲染的时候都会执行。此时先执行return函数，再执行effect中的副作用。
- React 会在组件卸载的时候执行清除操作（即执行return）
依赖项的注意事项
一般选择什么作为useEffect的依赖项？选择依赖项时需要注意些什么呢？
https://codesandbox.io/s/trusting-cherry-7i2wt?file=/src/App.tsx
分别选择常量、状态对象和普通对象作为依赖项。可以发现，选择常量时，除了第一次渲染以外，之后每次页面渲染都不会去调用useEffect；选择状态对象时，每次该状态改变时（即页面重新渲染后），都会去调用useEffect；而选择一般对象时，会陷入无限循环的去调用useEffect。
import { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const [num, setNum] = useState(0);
const [text, setText] = useState<string[]>([]);
const constValue = "小花";
const object = { name: "小花" };
useEffect(() => {
console.log("页面重新渲染了");
setText(["小花", "小明", "嚣张"]);
}, [constValue]);
return (
<div className="App">
<h1>选择依赖项的注意事项</h1>
<p>数字：{num}</p>
<button
onClick={() => {
setNum(num + 1);
}}
>
增加
</button>
{text.map((item) => (
<div>{item}</div>
))}
</div>
);
}
- 绝不可以使用非状态的对象作为依赖，因为每次组件更新后，该对象的地址都会发生改变，最终导致不停地的调用useEffect。
- 可以使用常量和状态对象作为依赖，因为状态对象在组建更新后并不会改变，除非调用setState改变。
五、自定义hook
Hook 使用规则
- 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
- 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中，我们稍后会学习到。）
为什么只能在函数最外层调用hook？
自定义一个useArray hook
遵循React的规则，使用React提供的基础hook，自定义一个hook。该hook封装了对数组的操作，在其他地方可以方便的调用这个hook来完成对数组的操作
https://codesandbox.io/s/fervent-hodgkin-g0ipv?file=/src/App.tsx
注意事项
- 自定义hook一定要使用use开头的命名规范，否则会直接报错
- 不要在回调函数中调用hook，应该把需要用到的回调方法通过hook返回，然后在需要用到的函数组件最外层获取该方法，这样就可以在回调函数中调用该方法。
网友评论