使用useCallback优化代码

useCallback是对传过来的回调函数优化，返回的是一个函数；useMemo返回值可以是任何，函数，对象等都可以。
简单来说就是返回一个函数，只有在依赖项发生变化的时候才会更新（返回一个新的函数）。

1.原理分析

useCallback是React Hooks中的一个函数，用于优化函数组件的性能。它的作用是返回一个memoized（记忆化的）函数，这个函数只有在依赖项发生变化时才会重新计算，否则会直接返回上一次计算的结果。
useCallback是对传过来的回调函数优化，返回的是一个函数；useMemo返回值可以是任何，函数，对象等都可以。
简单来说就是返回一个函数，只有在依赖项发生变化的时候才会更新（返回一个新的函数）。

2.案例分析：

父组件定义一个请求函数fetchData，和一个状态query,将query当作fetchData的参数，将该函数传递进子组件，当父组件query发生变化时，让子组件调用该函数发起请求。

class Parent extends Component {
  state = {
    query: 'react'
  };
  fetchData = () => {    
    const url = 'https://hn.algolia.com/api/v1/search?query=' + this.state.query;    // ... Fetch data and do something ...  };  render() {
    return <Child fetchData={this.fetchData} />;
  }
}

class Child extends Component {
  state = {
    data: null
  };
  componentDidMount() {
    this.props.fetchData();
  }
  componentDidUpdate(prevProps) {
    // 🔴 This condition will never be true
    if (this.props.fetchData !== prevProps.fetchData) {
      this.props.fetchData();
    }
  }
  render() {
    // ...
  }
}

在本代码中，fetchData是一个class方法！（或者你也可以说是class属性）它不会因为状态的改变而不同，所以this.props.fetchData和 prevProps.fetchData始终相等，因此不会重新请求。

2.1旧思维–优化该案例：

子组件使用：

componentDidUpdate(prevProps) {
    this.props.fetchData();
}

这样可以发起请求，但是会在每次渲染后都去请求。
或者改变父组件：

render() {
    return <Child fetchData={this.fetchData.bind(this, this.state.query)} />;
}

但这样一来，this.props.fetchData !== prevProps.fetchData 表达式永远是true，即使query并未改变。这会导致我们总是去请求。(bind() 方法会创建一个新的函数对象)
唯一现实可行的办法是把query本身传入 Child 组件。 Child 虽然实际并没有直接使用这个query的值，但能在它改变的时候触发一次重新请求：

class Parent extends Component {
  state = {
    query: 'react'
  };
  fetchData = () => {
    const url = 'https://hn.algolia.com/api/v1/search?query=' + this.state.query;
    // ... Fetch data and do something ...
  };
  render() {
    return <Child fetchData={this.fetchData} query={this.state.query} />;  }
}

class Child extends Component {
  state = {
    data: null
  };
  componentDidMount() {
    this.props.fetchData();
  }
  componentDidUpdate(prevProps) {
    if (this.props.query !== prevProps.query) {      this.props.fetchData();    }  }
  render() {
    // ...
  }
}

在class组件中，函数属性本身并不是数据流的一部分。使用useCallback，函数完全可以参与到数据流中。我们可以说如果一个函数的输入改变了，这个函数就改变了。如果没有，函数也不会改变。

2.2开始使用hooks：

场景一： 使用函数组件
但父组件不使用useCallback处理函数

import React, { useCallback, useState, useEffect } from 'react';
import './App.css';

function App() {
  const [query, setQuery] = useState(1);
  const [queryOther, setQueryOther] = useState(1);
  const fecthData = () => {
    console.log('新的fetch');
    return query;
  }
  const add = () => {
    console.log('点击add');
    setQuery(query + 1);
  }
  const addOther = () => {
    console.log('点击addOther');
    setQueryOther(queryOther + 1);
  }
  return (
    <>
      <Child fecthData={fecthData} />
      <button onClick={add}>+1</button>
      <button onClick={addOther}>other+1</button>
      <div>{ query }</div>
    </>
  );
}

function Child({ fecthData }: { fecthData: any }) {
  console.log('子组件相关内容');
  useEffect(() => {
    const querN = fecthData();
    console.log('子组件调用该函数获取到相关内容', querN);
  }, [fecthData])
  return <div>
    123
  </div>
}

export default App;

初始化的时候:

点击按钮：

但是从图里面可以看到，点击addOther时，并没有使得query发生变化，但是子组件仍然调用了该函数发起请求。可以看到这种方法需求可以使得子组件在父组件的状态query发生变化时，成功发起了请求，但是还是存在副作用。
问题的原因在于状态queryOther的改变，使得父组件重新渲染，重新生成了fecthData函数，并返回了该函数新的地址，导致子组件刷新。

场景二：父组件使用useCallback处理函数

import React, { useCallback, useState, useEffect } from 'react';
import './App.css';

function App() {
  const [query, setQuery] = useState(1);
  const [queryOther, setQueryOther] = useState(1);
  const fecthData = useCallback(() => {
    console.log('新的fetch');
    return query;
  }, [query])
  const add = () => {
    console.log('点击add');
    setQuery(query + 1);
  }
  const addOther = () => {
    console.log('点击addOther');
    setQueryOther(queryOther + 1);
  }
  return (
    <>
      <Child fecthData={fecthData} />
      <button onClick={add}>+1</button>
      <button onClick={addOther}>other+1</button>
      <div>{ query }</div>
    </>
  );
}

function Child({ fecthData }: { fecthData: any }) {
  console.log('子组件相关内容');
  useEffect(() => {
    const querN = fecthData();
    console.log('子组件调用该函数获取到相关内容', querN);
  }, [fecthData])
  return <div>
    123
  </div>
}

export default App;

初始状态

点击按钮：

可以看到只有点击+1按钮改变query才会使得子组件发起请求，点击other+1已经没有处罚上文副作用。

原因分析：
使用了useCallback，useCallback的工作原理是什么？useCallBack的本质工作不是在依赖不变的情况下阻止函数创建，而是在依赖不变的情况下不返回新的函数地址而返回旧的函数地址。不论是否使用useCallBack都无法阻止组件render时函数的重新创建。在本例子中点击按钮other+1并没有使得query发生变化，所以并没有返回新的fetchData函数地址，又因为在子组件中使用useEffect对fetchData监听时，所以子组件不会发起请求。但是，点击按钮other+1时，子组件虽然没发起请求，但是还是刷新了，这是什么原因呢？这是因为子组件直接在父组件中挂载，没有做过任何优化，当父组件重新渲染时，会导致子组件也跟着渲染。所以单纯的使用useCallback可以监听到相应变化，使得子组件做出变化，但是并不能优化性能。所以当我们不用监听某个状态使得函数发生改变时，不要轻易使用useCallback，因为使用 useCallBack后每次执行到这里内部比对是否变化，还有存一下之前的函数，消耗更大了。

场景三：优化上述问题，搭配React.memo使用

import React, { useCallback, useState, useEffect } from 'react';
import './App.css';

function App() {
  const [query, setQuery] = useState(1);
  const [queryOther, setQueryOther] = useState(1);
  const fecthData = useCallback(() => {
    console.log('新的fetch');
    return query;
  }, [query])
  const add = () => {
    console.log('点击add');
    setQuery(query + 1);
  }
  const addOther = () => {
    console.log('点击addOther');
    setQueryOther(queryOther + 1);
  }
  return (
    <>
      <Child fecthData={fecthData} />
      <button onClick={add}>+1</button>
      <button onClick={addOther}>other+1</button>
      <div>{ query }</div>  ，，m

const Child = React.memo(({ fecthData }: { fecthData: any }) => {
  console.log('子组件相关内容');
  useEffect(() => {
    const querN = fecthData();
    console.log('子组件调用该函数获取到相关内容', querN);
  }, [fecthData])
  return <div>
    123
  </div>
})


export default App;

初始状态：

点击按钮:

一切问题都解决了。点击other+1按钮，没有使得子组件发起请求，也没有使得子组件因为这个无关变量的变化，导致重新渲染。

原因分析：

• 使用useCallback使得无关变量变化时，阻止了新创建的fetchData的新地址返回，传给子组件的还是原本的函数地址（useCallBack的本质工作不是在依赖不变的情况下阻止函数创建，而是在依赖不变的情况下不返回新的函数地址而返回旧的函数地址）
• React.memo 这个方法，此方法内会对 props 做一个浅层比较，如果如果 props 没有发生改变（useCallback的存在使得props没变化），则不会重新渲染此组件。

场景四：单纯使用React.memo会发生什么

import React, { useCallback, useState, useEffect } from 'react';
import './App.css';

function App() {
  const [query, setQuery] = useState(1);
  const [queryOther, setQueryOther] = useState(1);
  const fecthData = () => {
    console.log('新的fetch');
    return query;
  }
  const add = () => {
    console.log('点击add');
    setQuery(query + 1);
  }
  const addOther = () => {
    console.log('点击addOther');
    setQueryOther(queryOther + 1);
  }
  return (
    <>
      <Child fecthData={fecthData} />
      <button onClick={add}>+1</button>
      <button onClick={addOther}>other+1</button>
      <div>{ query }</div>
    </>
  );
}

const Child = React.memo(({ fecthData }: { fecthData: any }) => {
  console.log('子组件相关内容');
  useEffect(() => {
    const querN = fecthData();
    console.log('子组件调用该函数获取到相关内容', querN);
  }, [fecthData])
  return <div>
    123
  </div>
})


export default App;

初始状态：

点击按钮

React.memo检测的是props中数据的栈地址是否改变。而父组件重新构建的时候，会重新构建父组件中的所有函数（旧函数销毁，新函数创建，等于更新了函数地址）,新的函数地址传入到子组件中被props检测到栈地址更新。也就引发了子组件的重新渲染。所以，在上面的代码示例里面，子组件是要被重新渲染的。上文中的fetchData因为失去了useCallback的保护使得子组件的props发生了变化，从而React.memo也失去了作用，而且因为fetchData因为失去了useCallback的保护，使得点击other+1按钮改变无关的变量时，子组件也调用了请求函数。

3.useCallback使用总结：

• 可以使用useCallback可以监听到相应状态变化，使得父/子组件做出响应。
• 但是滥用useCallback会影响性能，需搭配React.memo进行使用，否则适得其反。