文章目录
一、React Hook原理
可以看到没有用React Hook之前,React组件都是类组件
1. 类组件的缺点:
- 大型组件难以拆分和重构,测试也比较难
- 业务逻辑分散在组件的各个方法之中,导致逻辑重复
- 组件内还有render高阶组件
2. 函数组件
在开发过程中,开发人员更希望组件成为数据流通的管道,在开发过程中再根据需要组合对应的管道即可。
在早期,React支持函数组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
但是,这种写法是纯函数,不能包含状态,也不支持生命周期方法
所以ReactHook的设计目的就是加强函数组件,在完全不使用类的情况下写出一个全功能的组件。
3. 类组件和函数组件的区别
区别 | 函数组件 | 类组件 |
---|---|---|
是否有this | 没有 | 有 |
是否有声明周期 | 没有 | 有 |
是否有状态state | 没有 | 有 |
二、React Hook API
React Hooks 的意思是,组件尽量写成纯函数,如果需要外部功能和副作用,就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。
所有的钩子都是为函数引入外部功能,所以 React 约定,钩子一律使用use前缀命名,便于识别
1. useState 状态钩子
useState()用于为函数组件引入状态(state)。纯函数不能有状态,所以把状态放在钩子里面。
useState()这个函数接受状态的初始值,作为参数,该函数返回一个数组。数组有两个参数:
- 第一个参数是变量,
- 第二个成员是一个函数,用来更新状态```js
const [conut ,setCount] = useState(0)
//声明了一个state,且对count赋初始值为0
setCount(1)
console.log(count)//1
Usestate的参数—初始化(定义的state)
函数退出后,变量会消失,但是state中的变量就会被react保留
参数不一定是一个对象,也可以是,初始化只有在第一次渲染时,才会用到
使用数组解构语法,调用usestate时可以给state变量取不同的名字。
2. useEffect():副作用钩子
useEffect()接受两个参数。
- 第一个参数是一个函数,异步操作的代码放在里面。
- 第二个参数是一个数组,用于给出 Effect 的依赖项,只要这个数组发生变化,useEffect()就会执行。
他其实代表三个钩子函数,取决于第二个的参数:
- 为空时 == componentDidMount
- 没有第二个参数时 == componentDidMount componentDidUpdate
- 有值时 == 只有当监听的那个值变化时,才会触发componentDidUpdate
- 有值时,并且为return时 == 组件卸载componentWillUnmount
3. useCallback
这个函数可以节省不必要的渲染,节省资源,受控于第二个参数,是否允许第一个参数执行
4. memo
定时器内部赋值,页面没有变化,但内部一直在渲染

当父组件在渲染时,子组件也会跟着一起渲染,但是使用react memo后在导出子组件,自组件就不会跟着父组件一起渲染