Hook改变的React Component写法思路(2) – useCallback和useMemo

文章目录

• useCallback把匿名回调“存”起来
  • useMemo保存一些计算值

useCallback把匿名回调“存”起来

在之前版本的文档和大牛的blog中都有提到避免在component render时候声明匿名方法，因为这些匿名方法会被反复重新声明而无法被多次利用，然后容易造成component反复不必要的渲染。

在Class component当中我们通常将回调函数声明为类成员：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1class MyComponent extends React.Component {

2    constructor(props) {

3        super(props);

4        this.clickCallback = this.clickCallback.bind(this);

5    }

6    clickCallback() {

7        // ...

8    }

9    render() {

10        return <button onClick={this.clickCallback}>Click Me!</button>;

11    }

12}

13

14

使用useCallback hook就可以避免bind操作：

1
2
3
4
5
6
7
8
1function MyComponent(props) {

2    const clickCallback = React.useCallback(() => {

3        // ...

4    }, []);

5    return <button onClick={clickCallback}>Click Me!</button>;

6}

7

8

这个回调也可以接收参数：

1
2
3
4
5
6
7
8
9
1function MyComponent(props) {

2    const clickCallback = React.useCallback((value) => {

3        // ...

4    }, []);

5    const clickCallbackEmpty = React.useCallback(() => clickCallback(void 0), [clickCallback]);

6    return <button onClick={clickCallbackEmpty}>Click Me!</button>;

7}

8

9

这里我为了不使用匿名函数，额外再声明了一个clickCallbackEmpty回调函数。看起来挺奇怪的，不过实际使用过程中为了提高代码重用性不可避免地有一些这样的用法。

除此之外，如果想避免使用匿名回调，并且必须要传入一些事件对象里没有的参数，那就要考虑拆分component了。

同useEffect一样，useCallback的第二个参数是用于比较memo的上下文中对应值是否变化，如果有变化则会重新声明回调函数。如果这个参数为空数组，则只会在component挂载时运行。如果不存在这个参数，则会在每次渲染时运行。

上例中，clickCallbackEmpty声明时的第二个参数里，传入了clickCallback，因为我在clickCallbackEmpty中调用了clickCallback。我只需要在component挂载时，和clickCallback发生变化时，更新clickCallbackEmpty就好。

实际上监测clickCallback变化在上例中是没有什么卵用的，因为我的clickCallback并不会变化，它的值已经在component挂载时就敲定了。但为了后续增删代码防止出错，个人建议还是加上比较好。

useMemo保存一些计算值

从component props中获得原始数据， 计算、转换格式后再显示是非常常见的需求。使用useMemo可以轻松防止不必要的重复计算。

1
2
3
4
5
6
7
8
9
1function MyComponent(props) {

2    const computedVal = useMemo(() => 

3        props.a + props.b,

4        [props.a, props.b]

5    );

6    return <div>{computedVal}</div>;

7}

8

9

实际上useCallback就等同于

1
2
3
1useMemo(() => callback, [var1, var2, ...]);

2

3