Hook是什么
Hook是React从16.8开始支持的特性,使用Hook可以在不使用class时使用state
Hook支持在不需要修改组件状态的情况下复用逻辑状态,从而解决使用render prop和高阶组件产生的代码结构复杂的问题
Hook可以解决在class中因为组件在生命周期函数内分散处理导致的逻辑混乱。
Hook可以解决在class中this的复杂问题。
Hook的结构
State Hook
在通过state进行状态管理时,我们会使用contructor()构造器来初始化state,使用setState()更新state的状态
在Hook里,不再使用以上的两种方法,将会使用
const [name,setName]=useState(defaultValue);
这样的方法进行对状态进行管理。
UseState将会被调用来为函数组件添加state,一个useState方法将会返回一对值(一个数组),一个当前状态和更新这个当前状态的函数,可以在组件的其他地方调用这个更新函数。
这对返回值使用数组解构。
一个useState语句将会创造一个状态。
Effect Hook
我们可以把useEffect看作是componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
useEffect的第二个可选参数是判断是否执行该函数,如果第二个参数在重渲染的时候没有发生改变,将会跳过这个当前的useEffect。
如果第二个参数是一个空数组([]),effect将只会在组件挂载和卸载时执行,然而这种操作存在风险,具体的见文档中的Hook/FAQ:在依赖列表中省略函数是否安全?
一个简单的例子
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// 相当于 componentDidMount 和 componentDidUpdate:
useEffect(() => {
// 使用浏览器的 API 更新页面标题
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
在这个例子中,声明了一个名为count的状态,在每次点击button时,通过事件处理将会使count+1,在useEffect函数中,使用浏览器的API将count显示。
原文地址:https://www.cnblogs.com/liuju/p/12633624.html