什么是hooks？ (coderwhy)
hooks是react 16.8（2019年）出的新特性。
react有两种形式来创建组件——类式和函数式。在hooks之前类式组件就是react最主流的编程方式。 这个时候，函数式组件是非常鸡肋的，几乎没什么用。因为函数式组件不能保存数据状态，所以只能用于一些简单的展示的场景，传什么数据就展示什么数据（因为只有props是可以用的）。并且函数组件是没有生命周期的。
但因为函数式编程的思想在前端是普遍流行和推崇的。我猜想react团队在设计函数式组件的时候肯定已经想到了这个问题。但可能当时没有想到合适方式实现函数式组件的完整功能。
对于开发者来说，使用类式组件或者函数式组件来开发功能实际上都是无所谓，谁好用就用谁。但设计者为了实现函数式组件可以说是绞尽脑汁。至于设计出来的东西好不好用另说。但函数式组件的这条路是一定要走下去的。
还有一个促使hooks诞生的原因是类式组件存在一些缺点。例如类式不好对功能进行拆分。当然hooks本身是否存在别的缺点我们另说。class概念难以理解以及this的指向问题处理对于初学者来说都是比较麻烦的。
1.hooks是完全可选的，你不用hooks，用类式组件也是完全没有问题的。
2.hooks是100%向后兼容的。hooks不包含任何破坏性改动。
3.hooks的代码比类组件相对少一些。
useState和useEffect的说明
你只要把这两个hooks学了，已经可以应对90%的情况了，因为这两个hooks可以处理state和生命周期问题。
useState的使用和使用规则
useState是一个hook，但他和react的state本质是没什么关系的，只是功能上是一样的——有一个地方能存储组件的数据。
基本使用
我们定义一个useState。数组的第一个参数是变量的名字，第二个名字是用于修改变量的函数，可以传一个初始值。
这是hooks的基本使用规则，都是这样使用的。
要修改值，我们直接调用自己定义的setCount，把原来的count和num相加，就实现了计算器的效果。
import { useState } from "react";function App() {const [count, setCount] = useState(0);function handleAdd(num) {setCount(count + num);}return (<div className="App"><div>{count} <button onClick={(e) => handleAdd(1)}>+1</button></div></div>);
}export default App;
我们可以只写一个变量名，不写set方法，其实数组的两个变量，就是变量的get和set方法。
import { useState } from "react";
function App() {const [user] = useState({ name: "Tom", age: 18 });//const [user,setName] = useState({ name: "Tom", age: 18 });return (<div className="App"><div>{user.name + " " + user.age}</div></div>);
}export default App;
使用规则
不是所有的地方都可以使用hooks，hooks必须定义在函数顶层，不能定义在if,for里面。官方就是这样规定的。
hooks简单原理
在函数组件执行完成后，count变量已经被销毁了，但是count的值被react保留了起来，当页面再次渲染的时候，会重新创建一个count变量，并把原来的值赋值给新创建的这个count变量。
const [count, setCount] = useState(0);
useEffect的使用
什么是useEffect
effect的意思是影响，效果，效应。其实说简单点，这个hooks就是用来监听useState的数据变化的。同时可以实现类似生命周期的效果，但实际上，生命周期效果只是useEffect的一个特性，最直观的作用还是监听数据的变化。
useEffect基本使用
下面的代码实现一个计算器。
import { useEffect, useState } from "react";function App(props) {const [count, setCount] = useState(100);useEffect(() => {console.log(count);});function handleAdd(num) {setCount(count + num);}return (<div>App:{count}<button onClick={(e) => handleAdd(1)}>+1</button></div>);
}export default App;
第一次页面渲染的时候，useEffect里面的log输出了。
我们点击按钮做累加。useEffect回调函数被多次执行了。但这和count这个setState是没有关系的。也就是说，只要页面重新渲染了，useEffect就会重新执行。
啥？那useEffect有什么用？别着急，下一小节你就明白了。
多个useEffect的使用和绑定setState变量
上面的例子可能挺让人困惑的，到底是要干什么？下面就来好好说说useEffect的本质是什么。看完这个小节，就能很好理解useEffect是怎么用的了。
我们定义两个useState变量，count和user。并且定义两个useEffect方便绑定这两个useState。
useEffect接收两个参数，第一个参数就是我们前面用的回调函数，第二个参数是一个数组，里面放useState产生的变量，放什么变量，回调函数就只会在放的变量发生改变的时候回调。
import { useEffect, useState } from "react";function App(props) {const [count, setCount] = useState(100);const [user, setUser] = useState({ name: "Tom", age: 18 });useEffect(() => {console.log("监听count:" + count);}, [count]);useEffect(() => {console.log("监听user:", user);}, [user]);function handleAdd(num) {setCount(count + num);}return (<div>App:{count}<button onClick={(e) => handleAdd(1)}>+1</button></div>);
}export default App;
页面加载的时候，我们可以看到两个useEffect输出下面的内容。
当点击+1的时候，count的useEffect回调函数执行了，而user的useEffect回调函数没有执行。这说明，在指定了第二个参数后，useEffect的回调函数只会在第二个参数的值发生变化的时候才会回调。
假设写成下面这个样子，那么在user或者count发生改变的时候，回调函数会被执行。
useEffect(() => {}, [user,count]);
假如写成下面这个样子，那么user,count发生变化，这个函数都不会执行。也就是任何useState发生变化，这个函数都不会回调。但是在第一次渲染的时候函数还是会回调的。
useEffect(() => {}, []);
假如写成下面这个样子，也就是最开始的代码，又是怎么回事呢？
写成这样表示，任何useState发生变化，这个函数都会回调。
useEffect(() => {});
有什么不明白的请参考小结。
useEffect的返回值
返回值是一个回调函数，这个函数在组件被销毁或者监听的数据更新的时候回调。
useEffect(() => {return ()=>{}});
实用技巧一 充当componentDidMount和componentWillUnmount
首先，我们第二个参数写空数组，这样任何useState的更新都不会触发这个useEffect。但是在组件第一次渲染和销毁的时候，会分别执行下面两个位置的代码，也就正好和componentDidMount和componentWillUnmount这两个生命周期的执行时机是一样的。
这是useEffect的使用技巧，react作者是否有意这样设计我也不是很清楚。
useEffect(() => {//这里相当于componentDidMountreturn ()=>{//这里相当于componentWillUnmount}}, []);
实用技巧二 充当componentDidUpdate
因为没有填第二个参数，所以在有任何数据更新的时候都会触发这个方法，相当于是componentDidUpdate生命周期
useEffect(() => {//有数据更新的时候触发});
小结
1.useEffect主要目的是监听useState数据的变化。
2.useEffect充当生命周期只是他的附加功能。
useContext的使用（掌握）
定义两个Context。
import { createContext } from "react";const ThemeContext = createContext();
const UserContext = createContext();export { ThemeContext, UserContext };
使用context并给初始值。
root.render(// <React.StrictMode><UserContext.Provider value={{ name: "Tom", age: 18 }}><ThemeContext.Provider value={{ color: "red", fontSize: 18 }}><App /></ThemeContext.Provider></UserContext.Provider>// </React.StrictMode>
);
通过useContext直接获取到context的值就可以直接使用了。
如果不用useContext，你就要使用xxxContext.Consumer来使用，多个context的时候还要嵌套。这里就体现了hooks的一个优点。
import { useContext } from "react";
import { ThemeContext, UserContext } from "./context";function App(props) {const user = useContext(UserContext);const theme = useContext(ThemeContext);return (<div>App:<div>user:{user.name + " " + user.age}</div><div style={{ color: theme.color, fontSize: theme.fontSize }}>theme</div></div>);
}
export default App;
useReducer的使用（了解）
这个东西在数据比较复杂的时候，有点用处，但本身用法也复杂。不推荐使用。有用到再说。
useCallback和useMemo的使用
这两个hooks是用来做性能优化的。
useCallback的使用
在将一个函数传递给子组件的时候，用useCallback做性能优化。
useRef的使用
和类组件的createRef是非常类似的，只是我们用useRef。
在函数组件里面，ref返回的值始终是同一个对象。
import { memo, useRef } from "react";const App = memo((props) => {const refBtn = useRef();const refInput = useRef();function handleClick() {//获取到组件自身console.log(refBtn.current);//获取input焦点refInput.current.focus();}return (<div>App<button ref={refBtn} onClick={handleClick}>点击</button><input ref={refInput}></input></div>);
});
export default App;
自定义hooks
自定义hook监听生命周期
其实就是把useEffect封装了一下，这样就可以监听组件的创建和销毁了。
function useLogLife(name = "") {useEffect(() => {console.log(name, "组件被创建了");return () => {console.log(name, "组件被销毁了");};}, []);
}
这个例子可以在show变化的时候创建和销毁About和Home组件。
import { memo, useEffect, useState } from "react";function useLogLife(name = "") {useEffect(() => {console.log(name, "组件被创建了");return () => {console.log(name, "组件被销毁了");};}, []);
}const About = memo((props) => {useLogLife("about");return <div>About</div>;
});const Home = memo((props) => {useLogLife("home");return <div>Home</div>;
});const App = memo((props) => {useLogLife("app");const [show, setShow] = useState(false);return (<div>App Component{show ? <Home /> : ""}{!show ? <About /> : ""}<button onClick={(e) => setShow(!show)}>点击</button></div>);
});
export default App;
获取context
首先我们定义context,和原来没什么区别。
import { createContext } from "react";const UserContext = createContext();
const TokenContext = createContext();export { UserContext, TokenContext };
提供初始数据
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./自定义hook获取context/App";
import { TokenContext, UserContext } from "./自定义hook获取context/context";const root = ReactDOM.createRoot(document.getElementById("root"));root.render(// <React.StrictMode><UserContext.Provider value={{ name: "Tom", age: 18 }}><TokenContext.Provider value={"this_is_token"}><App /></TokenContext.Provider></UserContext.Provider>// </React.StrictMode>
);
我们自定义一个useUserToken，把UserContext和TokenContext通过useContext套一层，这样我们就不需要使用consumer了。
import { useContext } from "react";
import { TokenContext, UserContext } from ".";
function useUserToken() {const user = useContext(UserContext);const token = useContext(TokenContext);return [user, token];
}
export default useUserToken;
最后，我们只需要使用我们自定义的useUserToken就可以同时获取到user和token的数据了。
import { memo } from "react";
import useUserToken from "./context/useUserToken";const Home = memo((props) => {const [user, token] = useUserToken();return <div>Home: {user.name + " " + token}</div>;
});const About = memo((props) => {const [user, token] = useUserToken();return <div>About: {user.name + " " + token}</div>;
});const App = memo((props) => {const [user, token] = useUserToken();return (<div>App: {user.name + " " + token}<Home /><About /></div>);
});
export default App;
监听窗口滚动位置
定义一个下面这样的useEffect，在组件里面直接调用window.scrollX， window.screenY就可以直接用了。
useEffect(() => {function handleScroll(event) {console.log(window.screenX, window.screenY);}window.addEventListener("scroll", handleScroll);return () => {window.removeEventListener("scroll", handleScroll);};}, []);
我们自定义一个hook封装一下。
import { useEffect, useState } from "react";
function useScrollPosition() {const [scrollX, setScrollX] = useState(0);const [scrollY, setScrollY] = useState(0);useEffect(() => {function handleScroll(event) {console.log(window.screenX, window.screenY);setScrollX(window.scrollX);setScrollY(window.scrollY);}window.addEventListener("scroll", handleScroll);return () => {window.removeEventListener("scroll", handleScroll);};}, []);return [scrollX, scrollY];
}export default useScrollPosition;
这样就可以在多个组件里面快速使用了。
import { memo, useEffect } from "react";
import "./style.css";
import useScrollPosition from "./hooks/useScrollPosition";const Home = memo((props) => {const [scrollX, scrollY] = useScrollPosition();return <div>Home:{scrollY} </div>;
});const About = memo((props) => {const [scrollX, scrollY] = useScrollPosition();return <div>About:{scrollY} </div>;
});const App = memo((props) => {const [scrollX, scrollY] = useScrollPosition();return (<div className="page">App:{scrollY}<Home /><About /></div>);
});
export default App;
style.css
.page {height: 2000px;
}
页面滚动的时候，多个组件都可以获取到坐标了。
