函数组件，没有 class 组件中的 componentDidMount、componentDidUpdate 等生命周期方法，也没有 State，但这些可以通过 React Hook 实现。
React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来
React Hooks优点
- 代码可读性更强：通过 React Hooks 可以将功能代码聚合，方便阅读维护
- 组件树层级变浅：在原本的代码中，我们经常使用 HOC/render props 等方式来复用组件的状态，增强功能等，无疑增加了组件树层数及渲染，而在 React Hooks 中，这些功能都可以通过强大的自定义的 Hooks 来实现
九种常用的钩子
- useState：保存组件状态
- useEffect： 处理副作用
- useContext： 减少组件层级
- useReducer：类似于redux，通信
- useCallback： 记忆函数
- useMemo： 记忆组件
- useRef： 保存引用值
- useImperativeHandle： 透传 Ref
- useLayoutEffect： 同步执行副作用
1、useState保存组件状态
用来代替：state，setState
若使用对象做 State，useState 更新时会直接替换掉它的值，而不像 setState 一样把更新的字段合并进对象中。推荐将 State 对象分成多个 State 变量。
类组件案例
在类组件中，我们使用 this.state 来保存组件状态，并对其修改触发组件重新渲染。
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
name: "alife"
};
}
render() {
const { count } = this.state;
return (
Count: {count}
);
}
}
函数组件useState
在函数组件中，由于没有 this 这个黑魔法，React 通过 useState 来帮我们保存组件的状态。
- 通过传入 useState 参数后返回一个带有默认状态和改变状态函数的数组[obj, setObject] (名称是自定义的可修改[count, setCount]...)。
- 通过传入 新状态给函数 来改变原本的状态值。
import React, { useState } from "react";
function App() {
const [obj, setObject] = useState({
count: 0,
name: "alife"
});
let [count, setCount] = useState(0)
return (
Count: {obj.count}
);
}
注意: useState 不帮助你处理状态，相较于 setState 非覆盖式更新状态，useState 覆盖式更新状态，需要开发者自己处理逻辑。(代码如上)
2、useEffect 处理副作用
用来代替：componentDidMount、componentDidUpdate和componentWillUnmount的组合体。
默认情况下，useEffect会在第一次渲染之后和每次更新之后执行，每次运行useEffect时，DOM 已经更新完毕。
为了控制useEffect的执行时机与次数，可以使用第二个可选参数施加控制。
类组件案例
在例子中，组件每隔一秒更新组件状态，并且每次触发更新都会触发 document.title 的更新(副作用)，而在组件卸载时修改 document.title（类似于清除）
从例子中可以看到，一些重复的功能开发者需要在 componentDidMount 和 componentDidUpdate 重复编写，而如果使用 useEffect 则完全不一样。
import React, { Component } from "react";
class App extends Component {
state = {
count: 1
};
componentDidMount() {
const { count } = this.state;
document.title = "componentDidMount" + count;
this.timer = setInterval(() => {
this.setState(({ count }) => ({
count: count + 1
}));
}, 1000);
}
componentDidUpdate() {
const { count } = this.state;
document.title = "componentDidMount" + count;
}
componentWillUnmount() {
document.title = "componentWillUnmount";
clearInterval(this.timer);
}
render() {
const { count } = this.state;
return (
Count:{count}
);
}
}
useEffect
参数1：接收一个函数，可以用来做一些副作用比如异步请求，修改外部参数等行为。
参数2：称之为dependencies，是一个数组，如果数组中的值变化才会触发 执行useEffect 第一个参数中的函数。返回值(如果有)则在组件销毁或者调用函数前调用
-
- 比如第一个 useEffect 中，理解起来就是一旦 count 值发生改变，则修改 documen.title 值；
-
- 而第二个 useEffect 中传递了一个空数组[]，这种情况下只有在组件初始化或销毁的时候才会触发，用来代替 componentDidMount 和 componentWillUnmount，慎用；
-
- 还有另外一个情况，就是不传递第二个参数，也就是useEffect只接收了第一个函数参数，代表不监听任何参数变化。每次渲染DOM之后，都会执行useEffect中的函数。
import React, { useState, useEffect } from "react";
let timer = null;
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = "componentDidMount" + count;
},[count]);
useEffect(() => {
timer = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
// 一定注意下这个顺序：
// 告诉react在下次重新渲染组件之后，同时是下次执行上面setInterval之前调用
return () => {
document.title = "componentWillUnmount";
clearInterval(timer);
};
}, []);
return (
Count: {count}
);
}
3、useContext 减少组件层级
用来代替：Provider, Consumer
处理多层级传递数据的方式，在以前组件树种，跨层级祖先组件想要给孙子组件传递数据的时候，除了一层层 props 往下透传之外，我们还可以使用 React Context API 来帮我们做这件事
类组件案例
const { Provider, Consumer } = React.createContext(null);
function Bar() {
return {color => {color}} ;
}
function Foo() {
return
);
}
useContext使用的方法
- 要先创建createContex
使用createContext创建并初始化import { createContext } from 'react' const C = createContext(null); - Provider 指定使用的范围
在圈定的范围内，传入读操作和写操作对象，然后可以使用上下文这是爷爷 - 最后使用useContext
使用useContext接受上下文，因为传入的是对象，则接受的也应该是对象const {n,setN} = useContext(C)；
import React, { createContext, useContext, useReducer, useState } from 'react'
import ReactDOM from 'react-dom'
// 创造一个上下文
const C = createContext(null);
function App(){
const [n,setN] = useState(0)
return(
// 指定上下文使用范围，使用provider,并传入读数据和写入据
这是爷爷
)
}
function Baba(){
return(
这是爸爸
4、useReducer 数据交互
用来代替：Redux/React-Redux
唯一缺少的就是无法使用 redux 提供的中间件
import React, { useReducer } from "react";
const initialState = {
count: 0
};
function reducer(state, action) {
switch (action.type) {
case "increment":
return { count: state.count + action.payload };
case "decrement":
return { count: state.count - action.payload };
default:
throw new Error();
}
}
function App() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
);
}
5、useCallback 记忆函数
减少重复渲染
老规矩，第二个参数传入一个数组，数组中的每一项一旦值或者引用发生改变，useCallback 就会重新返回一个新的记忆函数提供给后面进行渲染。
这样只要子组件继承了 PureComponent 或者使用 React.memo 就可以有效避免不必要的 VDOM 渲染。
import React, { useState, useCallback, memo } from 'react'
const Child = memo(function(props) {
console.log('child run...')
return (
<>
hello
)
})
export default function UseCallback() {
console.log('parent run...')
let [ count, setCount ] = useState(0)
const handleAdd = useCallback(
() => {
console.log('added.')
},
[],
)
return (
{count}
6、useMemo 记忆组件
useCallback 的功能完全可以由 useMemo 所取代，如果你想通过使用 useMemo 返回一个记忆函数也是完全可以的。
区别：useCallback 不会执行第一个参数函数，而是将它返回给你，而 useMemo 会执行第一个函数并且将函数执行结果返回给你
function App() { const memoizedHandleClick = useMemo(() => () => { console.log('Click happened') }, []); // 空数组代表无论什么情况下该函数都不会发生改变 return
- useCallback： 常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。
- useMemo： 更适合经过函数计算得到一个确定的值，比如记忆组件。
function Parent({ a, b }) { const child1 = useMemo(() => () =>, [a]); const child2 = useMemo(() => () => , [b]); return ( <> {child1} {child2} ) }
7、useRef 保存引用值
用来代替：createRef
Ref
React提供了一个属性ref，用于表示对组价实例的引用，其实就是ReactDOM.render()返回的组件实例：
- ReactDOM.render()渲染组件时返回的是组件实例；
- 渲染dom元素时，返回是具体的dom节点。
ref可以挂载到组件上也可以是dom元素上；
- 挂到组件(class声明的组件)上的ref表示对组件实例的引用。不能在函数式组件上使用 ref 属性，因为它们没有实例：
- 挂载到dom元素上时表示具体的dom元素节点。
useRef()
useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。
- 可以通过 ref.current 值访问组件或真实的 DOM 节点，从而可以对 DOM 进行一些操作，比如监听事件等等
export default function App() { const count = useRef(0) const handleClick = (num) => { count.current += num setTimeout(() => { console.log("count: " + count.current); }, 3000) } return (); }You clicked {count.current} times
8、useImperativeHandle 透传 Ref
通过 useImperativeHandle 用于让父组件获取子组件内的索引
useImperativeHandle 应当与 forwardRef 一起使用
useImperativeHandle(ref, createHandle, [deps])
- ref：定义 current 对象的 ref createHandle：一个函数，返回值是一个对象，即这个 ref 的 current
- [deps]：即依赖列表，当监听的依赖发生变化，useImperativeHandle 才会重新将子组件的实例属性输出到父组件
- 注意：ref 的 current 属性上，如果为空数组，则不会重新输出。
import React, { useRef, useEffect, useImperativeHandle, forwardRef } from "react";
function ChildInputComponent(props, ref) {
const inputRef = useRef(null);
useImperativeHandle(ref, () => inputRef.current);
return ;
}
const ChildInput = forwardRef(ChildInputComponent);
function App() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();
}, []);
return (
9、useLayoutEffect 同步执行副作用
大部分情况下，使用 useEffect 就可以帮我们处理组件的副作用，但是如果想要同步调用一些副作用，比如对 DOM 的操作，就需要使用 useLayoutEffect，useLayoutEffect 中的副作用会在 DOM 更新之后同步执行。
(1) useEffect和useLayoutEffect有什么区别？
简单来说就是调用时机不同
useLayoutEffect：和原来componentDidMount&componentDidUpdate一致，在react完成DOM更新后马上同步调用的代码，会阻塞页面渲染。useEffect：是会在整个页面渲染完才会调用的代码。- 官方建议优先使用
useEffect
在实际使用时如果想避免页面抖动（在useEffect里修改DOM很有可能出现）的话，可以把需要操作DOM的代码放在useLayoutEffect里。关于使用useEffect导致页面抖动。
不过useLayoutEffect在服务端渲染时会出现一个warning，要消除的话得用useEffect代替或者推迟渲染时机。
import React from 'react'
import { useState, useEffect } from 'react'
export default function (props) {
let [data, setData] = useState({count: 0})
function loadData() {
return fetch('http://localhost:8080/api/movies/list')
.then(response => response.json())
.then(result => {
return result
})
}
useEffect(() => {
console.log('effect')
}, [data])
useEffect(() => {
console.log('mounted.')
;(async ()=>{
let result = await loadData()
console.log(result)
})()
// return () => {
// console.log('unmout')
// }
}, [])
return (
<>
{data.count}
)
}