【每日一题day7|难度：中等】自定义hook怎么写和引入

我个人喜欢把函数单独拎出来写，不喜欢超过20行的函数，复用性强一些

自定义hook函数通常可以在单独的文件中定义。写个简单的例子——拍平数组吧。在示例中，自定义hook函数被命名为useFlattenArray，可以将它定义在一个名为useFlattenArray.js（或者根据你的项目约定命名的其他文件）的文件中。

以下是useFlattenArray.js文件的示例代码：

import { useEffect, useState  } from 'react';

// 拍平数组
const flattenArray = (arr) => {
    const flattened = [];
    arr.forEach((item) => {
      if (Array.isArray(item)) {
        flattened.push(...flattenArray(item));
      } else {
        flattened.push(item);
      }
    });
    return flattened;
  };
  
// hooks
const useFlattenArray = (array) => {
  const [flattenedArray, setFlattenedArray] = useState([]);

  useEffect(() => {
    if (Array.isArray(array)) {
      setFlattenedArray(flattenArray(array));
    }
  }, [])
  return flattenedArray
};

export default useFlattenArray;

然后，在需要使用这个自定义hook函数的组件中，使用import语句引入该自定义hook函数： 确保相对路径'./useFlattenArray'是正确的。

这样，就可以在组件中使用useFlattenArray自定义hook函数，完成数组扁平化的功能。

import useFlattenArray from './useFlattenArray';

function App() {
  const arr = [1, [3], 4, [5, [3, 4]]]
  const res = useFlattenArray(arr)
  res.length&&console.log(res)

  return (
    <div></div>
  );
}

export default App;

打印效果如下，当然react严格模式下会打印两次，StrticMode默认会执行两次render，来检测你的render函数有没有副作用，关掉就只会打印一次了