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针对函数返回