react 笔记之- useMemo 、useCallck

useMemo 和 useCallback 使用

useMemo 和 useCallback ，从使用者的角度讲，useCallback 是针对回调函数callback的，反之，useMemo服务的是”值”的。

useMemo

以下代码，如果什么都不做，父组件只要状态更新，子组件随着全部重新render了。这时我会想到其实很多地方其实与改变的那个状态是不相关的，根本是无需更新，白白浪费了性能。
所以，子组件如果和父组件改变的状态无关，我们可以使用useMemo优化。useMemo就是这个作用。

import * as React from "react";
import {useState, useMemo} from "react";
export default function UseMemoPage(props) {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState("");
  const expensive = () => {
    console.log("compute");
    let sum = 0;
    for (let i = 0; i < count; i++) {
    sum += i; }
    return sum;
  };
  const expensiveMemo = useMemo( expensive , [count]) //依赖于count，count不变不回更新
  return (
    <div>
<h3>UseMemoPage</h3>
{/* <p>expensive 前:{expensive()}</p> */}
<p>expensive:{expensiveMemo}</p> // 依赖于count，count不变不回更新
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>add</button>
<input value={value} onChange={event => setValue(event.target.value)} />
</div>
); }
复制代码

useCallback

useCallback 缓存的是这个函数，如果不依赖任何state，那么父组件每次由state由的父组件更新都会使子组件重新render，同样，无需得更新是多此一举，能省则省。 示例用子组件引用父组件传来的函数举例

import React,{useState, useCallback,useMemo, PureComponent}  from 'react';

export default function UseCallbackPage(props) {
  const [count, setCount] = useState(0);
  const addClick = () => {
    let sum = 0;
    for (let i = 0; i < count; i++) {sum += i; }
    return sum;
  };
  const [value, setValue] = useState("");
  const callback = useCallback(addClick, []); // 缓存的是这个函数，如果不依赖

  return (
<div>
<h3>UseCallbackPage</h3>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>add</button>
<input value={value} onChange={event => setValue(event.target.value)} />
 <Child addClick={callback}/>
 {/* <Child addClick={addClick}/> */}
</div>
);
  }

class Child extends PureComponent {
  render() {
console.log("child render"); 

const {addClick} = this.props;
 return (
<div>
<h3>Child</h3>
<button onClick={() => console.log(addClick())}>add</button>
</div>
); }
}
复制代码