react hooks（useState、useEffect、useRef详解）
react hooks是React16.8.0之后出现的，类组件存在的问题：
- this指向问题
- 生命周期繁琐
- 创建类的实例开销较大
而函数组件函数组件没有this，没有生命周期，没有状态state，函数的执行开销比创建类实例的开销要小。因此，为了提高性能，尽量使用函数组件。然而函数组件有个最大的问题就是没有状态state，所以react官方出了个hooks来解决这个问题。
项目中最常用的几个hook：
useState
1. useState最好写到函数的起始位置，便于阅读
2. useState严禁出现在代码块（判断、循环）中
3. useState返回的函数（数组的第二项），引用不变（节约内存空间）
4. 使用函数改变数据，若数据和之前的数据完全相等（使用Object.is比较），不会导致重新渲染，以达到优化效率的目的。
5. 使用函数改变数据，若传入的是值，只会保留最后一次的函数执行，若传入的是函数，会在事件完成后统一执行。
import React, { useState } from 'react';// 引入state hook
export default function App() {
console.log("App render")
const [n, setN] = useState(0); //使用一个状态，该状态的默认值是0
return <div>
<button onClick={() => {
setN(n - 1);
setN(n - 2);// 传入值，只会保留最后一次setN的执行
// setN(prevN => prevN - 1);
// setN(prevN => prevN - 1);//传入函数，在事件完成之后统一执行
}}>-</button>
<span>{n}</span>
</div>
}6. 如果要实现强制刷新组件
- 类组件：使用forceUpdate函数
- 函数组件：使用一个空对象的useState
类组件
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
<button onClick={()=>{
//不会运行shouldComponentUpdate
this.forceUpdate();//强制重新渲染
}}>强制刷新</button>
</div>
)
}
}函数组件
import React, { useState } from 'react'
export default function App() {
const [, forceUpdate] = useState({});
return <div>
<p >
<button onClick={() => {
forceUpdate({});
}}>强制刷新</button>
</p>
</div>
}
useEffect
它能在函数组件中执行副作用，并且它与 class 中的生命周期函数极为类似。
- 副作用函数的运行时间点，是在页面完成真实的UI渲染之后。因此它的执行是异步的，并且不会阻塞浏览器
与类组件中componentDidMount和componentDidUpdate的区别
componentDidMount和componentDidUpdate，更改了真实DOM，但是用户还没有看到UI更新，是同步的。
useEffect中的副作用函数，更改了真实DOM，并且用户已经看到了UI更新，是异步的。
- 每个函数组件中，可以多次使用useEffect，但不要放入判断或循环等代码块中。
- useEffect中的副作用函数，可以有返回值，返回值必须是一个函数，该函数叫做清理函数
在每次运行副作用函数之前，运行返回的函数
首次渲染组件不会运行
组件被销毁时一定会运行
- useEffect函数，可以传递第二个参数
第二个参数是一个数组
数组中记录该副作用的依赖数据
当组件重新渲染后，只有依赖数据与上一次不一样时，才会执行副作用
所以，当传递了依赖数据之后，如果数据没有发生变化
副作用函数仅在第一次渲染后运行，清理函数仅在卸载组件后运行
import React, { useState, useEffect } from 'react'
function Test() {
useEffect(() => {
console.log("副作用函数，仅挂载时运行一次")
return () => {
console.log("清理函数，仅卸载时运行一次")
};
}, []); //使用空数组作为依赖项，则副作用函数仅在挂载的时候运行
console.log("渲染组件");
const [, forceUpdate] = useState({})
return <h1>Test组件 <button onClick={() => {
forceUpdate({})
}}>刷新组件</button></h1>
}
export default function App() {
const [visible, setVisible] = useState(true)
return (
<div>
{
visible && <Test />
}
<button onClick={() => {
setVisible(!visible);
}}>显示/隐藏</button>
</div>
)
}useRef
useRef(value)返回一个对象：{current: value}
- 在每次渲染时返回同一个 ref 对象
- 变更 .current 属性不会引发组件重新渲染
import React, { useRef } from 'react'
export default function App() {
console.log('app render')
const nRef = useRef(10); // {current:10}
return (
<div>
<h1>{nRef.current}不会变</h1>
<button onClick={() => {nRef.current--;console.log(nRef.current, 'nRef.current变化')}}>减少</button>
</div>
)
}本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
