React Hook初探
介绍
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性
class方式的痛点
- 组件变得复杂和难以维护
- class打包会有很多冗余代码,大量的class会使热重载出现不稳定的情况
- class自生具有的复杂度和组件嵌套过深props层级传递
例子
// 父组件
// 函数
changeValue = () => {
this.setState({
value: Math.random(100)
})
}
// 调用react hook
<Example aaa={value} />
// 调整传递到react hook的值
<Button onClick={() => this.changeValue()}>点击2222</Button>
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { Button } from 'antd';
function Example({ aaa }) {
const [count, setCount] = useState(0);
// useEffect是在渲染之后完成的,第二个参数每一项值发生改变才会调用
useEffect(() => {
document.title = `${count}`;
console.log(aaa, 111);
}, [aaa]);
// 针对函数返回
const getCount = useCallback(() => setCount(100), []);
// memo类似于PureCompoent 作用是优化组件性能,防止组件触发重渲染,useMemo是在渲染期间完成的
const getText = useMemo(() => <span>123123</span>, []);
return (
<div>
{aaa}
<p>{count}</p>
<Button onClick={() => setCount(count + 1)}>点击</Button>
<Button onClick={() => getCount()}>获取count</Button>
{getText}
</div>
)
}
export default Example;
介绍
- useState使class:在React Hook中,useState使class 组件变成了函数式组件并且拥有了自己的状态,同时还可以更新自身的状态,使用方式: const [state, setstate] = useState(initialState)
- useEffect:可以让我们监听数据变化做出对应的操作
- useMemo 作用是优化组件性能,防止组件触发重渲染,useMemo是在渲染期间完成的
- useCallback针对函数返回