React Hooks
什么是 Hooks
React
一直都提倡使用函数组件,但是有时候需要使用state
或者其他一些功能时,只能使用类组件,因为函数组件没有实例,没有生命周期函数,只有类组件才有。Hooks
是React 16.8
新增的特性,它可以让你在不编写class
的情况下使用state
以及其他的React
特性。- 如果你在编写函数组件并意识到需要向其添加一些
state
,以前的做法是必须将其它转化为class
。现在你可以直接在现有的函数组件中使用Hooks
。 use
开头的React API
都是Hooks
。
Hooks 解决了哪些问题?
- 状态逻辑难复用
- 在组件之间复用状态逻辑很难,可能要用到
render props
(渲染属性)或者HOC
(高阶组件),但无论是渲染属性,还是高阶组件,都会在原先的组件外包裹一层父容器(一般都是 div 元素),导致层级冗余 。
- 在组件之间复用状态逻辑很难,可能要用到
- 趋向复杂难以维护
- 在生命周期函数中混杂不相干的逻辑(如:在
componentDidMount
中注册事件以及其他的逻辑,在componentWillUnmount
中卸载事件,这样分散不集中的写法,很容易写出Bug
)。 - 类组件中到处都是对状态的访问和处理,导致组件难以拆分成更小的组件。
- 在生命周期函数中混杂不相干的逻辑(如:在
- this 指向问题
- 父组件给子组件传递函数时,必须绑定
this
- 父组件给子组件传递函数时,必须绑定
Hooks 优势
- 能优化类组件的三大问题
- 能在无需修改组件结构的情况下复用状态逻辑(自定义 Hooks )
- 能将组件中相互关联的部分拆分成更小的函数(比如设置订阅或请求数据)
- 副作用的关注点分离
- 副作用指那些没有发生在数据向视图转换过程中的逻辑,如
Ajax
请求、访问原生DOM
元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。以往这些副作用都是写在类组件生命周期函数中的。
- 副作用指那些没有发生在数据向视图转换过程中的逻辑,如
常用 Hooks
useState
React
假设当我们多次调用useState
的时候,要保证每次渲染时它们的调用顺序是不变的。- 通过在函数组件里调用它来给组件添加一些内部
state
,React
会 在重复渲染时保留这个 state useState
唯一的参数就是初始state
useState
会返回一个数组:一个state
,一个更新state
的函数- 在初始化渲染期间,返回的状态
state
与传入的第一个参数initialState
值相同。
我们可以在事件处理函数中或其他一些地方调用更新state
的函数。它类似class
组件的this.setState
,但是它不会把新的state
和旧的state
进行合并,而是直接替换。
使用方法
const [state, setState] = useState(initialState);
举个例子
import React, {
useState } from 'react';
function Counter() {
const [counter, setCounter] = useState(0);
return (
<>
<p>{
counter}</p>
<button onClick={
() => setCounter(counter + 1)}>counter + 1</button>
</>
);
}
export default Counter;
每次渲染都是一个独立的闭包
- 每一次渲染都有它自己的 Props 和 State
- 每一次渲染都有它自己的事件处理函数
- 当点击更新状态的时候,函数组件都会重新被调用,那么每次渲染都是独立的,取到的值不会受后面操作的影响
举个例子
function Counter() {
const [counter, setCounter] = useState(0);
function alertNumber() {
setTimeout(() => {
// 只能获取到点击按钮时的那个状态
alert(counter);
}, 3000);
}
return (
<>
<p>{
counter}</p>
<button onClick={
() => setCounter(counter + 1)}>counter + 1</button>
<button onClick={
alertNumber}>alertCounter</button>
</>
);
}
函数式更新
如果新的 state
需要通过使用先前的 state
计算得出,那么可以将回调函数当做参数传递给 setState
。该回调函数将接收先前的 state
,并返回一个更新后的值。
举个例子
function Counter() {
const [counter, setCounter] = useState(0);
return (
<>
<p>{
counter}</p>
<button onClick={
() => setCounter(counter => counter + 10)}> counter + 10 </button>
</>
);
}
惰性初始化
initialState
参数只会在组件的初始化渲染中起作用,后续渲染时会被忽略- 如果初始
state
需要通过复杂计算获得,则可以传入一个函数,在函数中计算并返回初始的state
,此函数只在初始渲染时被调用
举个例子
function Counter4() {
console.log('Counter render');
// 这个函数只在初始渲染时执行一次,后续更新状态重新渲染组件时,该函数就不会再被调用
function getInitState() {
console.log('getInitState');
// 复杂的计算
return 100;
}
let [counter, setCounter] = useState(getInitState);
return (
<>
<p>{
counter}</p>
<button onClick={
() => setCounter(counter + 1)}>+1</button>
</>
);
}
useEffect
- effect(副作用):指那些没有发生在数据向视图转换过程中的逻辑,如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。
- 副作用操作可以分两类:需要清除的和不需要清除的。
- 原先在函数组件内(这里指在 React 渲染阶段)改变 dom 、发送 ajax 请求以及执行其他包含副作用的操作都是不被允许的,因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性
- useEffect 就是一个 Effect Hook,给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途,只不过被合并成了一个 API
- useEffect 接收一个函数,该函数会在组件渲染到屏幕之后才执行,该函数有要求:要么返回一个能清除副作用的函数,要么就不返回任何内容
- 与 componentDidMount 或 componentDidUpdate 不同,使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕,这让你的应用看起来响应更快。大多数情况下,effect 不需要同步地执行。在个别情况下(例如测量布局),有单独的 useLayoutEffect Hook 供你使用,其 API 与 useEffect 相同。
使用方法
const App => () => {
useEffect(()=>{
})
// 或者
useEffect(()=>{
},[...])
return <></>
}
使用 class 组件实现修改标题
在这个 class 中,我们需要在两个生命周期函数中编写重复的代码,这是因为很多情况下,我们希望在组件加载和更新时执行同样的操作。我们希望它在每次渲染之后执行,但 React 的 class 组件没有提供这样的方法。即使我们提取出一个方法,我们还是要在两个地方调用它。参考React实战视频讲解:进入学习
class Counter extends React.Component{
state = {
number:0};
add = ()=>{
this.setState({
number:this.state.number+1});
};
componentDidMount(){
this.changeTitle();
}
componentDidUpdate(){
this.changeTitle();
}
changeTitle = ()=>{
document.title = `你已经点击了${
this.state.number}次`;
};
render(){
return (
<>
<p>{
this.state.number}</p>
<button onClick={
this.add}>+</button>
</>
)
}
}
使用 useEffect 组件实现修改标题
function Counter(){
const [number,setNumber] = useState(0);
// useEffect里面的这个函数会在第一次渲染之后和更新完成后执行
// 相当于 componentDidMount 和 componentDidUpdate:
useEffect(() => {
document.title = `你点击了${
number}次`;
});
return (
<>
<p>{
number}</p>
<button onClick={
()=>setNumber(number+1)}>+</button>
</>
)
}
useEffect 做了什么? 通过使用这个 Hook,你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数(我们将它称之为 “effect”),并且在执行 DOM 更新之后调用它。在这个 effect 中,我们设置了 document 的 title 属性,不过我们也可以执行数据获取或调用其他命令式的 API。
为什么在组件内部调用 useEffect? 将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量(或其他 props)。我们不需要特殊的 API 来读取它 —— 它已经保存在函数作用域中。Hook 使用了 JavaScript 的闭包机制,而不用在 JavaScript 已经提供了解决方案的情况下,还引入特定的 React API。
useEffect 会在每次渲染后都执行吗? 是的,默认情况下,它在第一次渲染之后和每次更新之后都会执行。(我们稍后会谈到如何控制它)你可能会更容易接受 effect 发生在“渲染之后”这种概念,不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时,DOM 都已经更新完毕。
清除副作用
- 副作用函数还可以通过返回一个函数来指定如何清除副作用,为防止内存泄漏,清除函数会在组件卸载前执行。如果组件多次渲染,则在执行下一个 effect 之前,上一个 effect 就已被清除。
function Counter(){
let [number,setNumber] = useState(0);
let [text,setText] = useState('');
// 相当于componentDidMount 和 componentDidUpdate
useEffect(()=>{
console.log('开启一个新的定时器')
let timer = setInterval(()=>{
setNumber(number=>number+1);
},1000);
// useEffect 如果返回一个函数的话,该函数会在组件卸载和更新时调用
// useEffect 在执行副作用函数之前,会先调用上一次返回的函数
// 如果要清除副作用,要么返回一个清除副作用的函数
// return ()=>{
// console.log('destroy effect');
// clearInterval($timer);
// }
});
// },[]);//要么在这里传入一个空的依赖项数组,这样就不会去重复执行
return (
<>
<input value={
text} onChange={
(event)=>setText(event.target.value)}/> <p>{
number}</p>
<button>+</button>
</>
)
}
跳过 Effect 进行性能优化
- 依赖项数组控制着 useEffect 的执行
- 如果某些特定值在两次重渲染之间没有发生变化,你可以通知 React 跳过对 effect 的调用,只要传递数组作为 useEffect 的第二个可选参数即可
- 如果想执行只运行一次的 effect(仅在组件挂载时执行),可以传递一个空数组([])作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值,所以它永远都不需要重复执行
function Counter(){
let [number,setNumber] = useState(0);
let [text,setText] = useState('');
// 相当于componentDidMount 和 componentDidUpdate
useEffect(()=>{
console.log('useEffect');
let timer = setInterval(()=>{
setNumber(number=>number+1);
},1000);
},[text]);// 数组表示 effect 依赖的变量,只有当这个变量发生改变之后才会重新执行 efffect 函数
return (
<>
<input value={
text} onChange={
(e)=>setText(e.target.value)}/> <p>{
number}</p>
<button>+</button>
</>
)
}
使用多个 Effect 实现关注点分离
- 使用 Hook 其中一个目的就是要解决 class 中生命周期函数经常包含不相关的逻辑,但又把相关逻辑分离到了几个不同方法中的问题。
// class版
class FriendStatusWithCounter extends React.Compon