> 在日常开发中，能够优雅的复用组件和逻辑，是优秀开发者的职责。在react中，复用逻辑的方式有很多，可以适用于不同的业务场景。今天说三个比较有代表性的，Render Props、HOC、Hooks




## Render Props

创建一个接受函数作为其子组件的prop的组件，该函数返回一个React元素。通过这种方式，父组件可以通过传递不同的函数来重用相同的逻辑。

示例代码：

```js
function DataFetcher({ url, children }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data: ', error));
  }, [url]);

  return children(data);
}

function DisplayData() {
  return (
    <DataFetcher url="https://api.example.com/data">
      {data => (
        <div>
          {data ? (
            <ul>
              {data.map(item => (
                <li key={item.id}>{item.name}</li>
              ))}
            </ul>
          ) : (
            <p>Loading...</p>
          )}
        </div>
      )}
    </DataFetcher>
  );
}

```

在上面的例子中，`DataFetcher`组件通过`children prop`接受一个函数，并将获取到的数据作为参数传递给该函数，`DisplayData`组件通过传递一个函数来获取并渲染数据。


## Higher-Order Components (HOC) 高阶函数

高阶组件是一个函数，接受一个组件作为参数并返回一个新的增强组件。

示例代码：

```js
function withDataFetching(WrappedComponent, url) {
  return function DataFetchingComponent(props) {
    const [data, setData] = useState(null);

    useEffect(() => {
      fetch(url)
        .then(response => response.json())
        .then(data => setData(data))
        .catch(error => console.error('Error fetching data: ', error));
    }, [url]);

    return <WrappedComponent {...props} data={data} />;
  };
}

function DisplayData({ data }) {
  return (
    <div>
      {data ? (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

const DisplayDataWithFetching = withDataFetching(DisplayData, 'https://api.example.com/data');
```

在上面的例子中，`withDataFetching`函数接受一个组件和一个`URL`作为参数，并返回一个新的组件，在新组件内部进行数据获取并传递给被包裹的组件。

## Hooks

自定义`Hooks`允许你在函数组件中重用状态逻辑。通过将逻辑封装在自定义`Hook`中，可以在不同的组件中复用它。

示例代码：

```js
function useDataFetching(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data: ', error));
  }, [url]);

  return data;
}

function DisplayData() {
  const data = useDataFetching('https://api.example.com/data');

  return (
    <div>
      {data ? (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}
```

在上面的例子中，`useDataFetching`自定义`Hook`封装了数据获取逻辑，`DisplayData`组件通过调用该`Hook`获取数据并渲染。



这些方法提供了灵活的方式来在`React`中实现逻辑复用，具体选择取决于项目中具体的业务场景和开发团队的偏好。

React逻辑复用的方式都有哪些

> React Hooks为函数组件引入了状态和生命周期特性，极大地增强了其功能。然而，正确使用Hooks是确保组件稳定性和性能的关键。本文将探讨React Hooks的基本规则，以及为什么我们不应该在条件语句和循环中使用它们。




## Hooks的基本规则

`React`团队为`Hooks`设定了两个基本规则：

1. **只在最顶层使用Hooks**：不要在循环、条件或嵌套函数中调用Hooks。
2. **只在React函数中调用Hooks**：不要在普通的JavaScript函数中调用Hooks。

这些规则确保了`Hooks`的调用顺序在多次渲染之间保持一致。由于`React`内部没有办法追踪到底有多少个状态或副作用需要被管理，它依赖于`Hooks`的调用顺序来关联状态和副作用。

## 为什么避免在条件语句和循环中使用Hooks

### 维持调用顺序

`React`的函数组件是声明式的；它们可能会因为父组件的变化或者自身的状态更新而多次执行。`React Hooks`必须在每次组件渲染时以相同的顺序被调用，以便`React`能够正确地追踪每个`Hook`的状态。如果我们在条件语句或循环中使用`Hooks`，就可能打乱这个顺序，导致状态管理出现问题。

### 避免逻辑错误

在条件语句中使用`Hooks`可能会导致组件在不同的渲染周期中创建不同数量的`Hooks`，这违反了`React`的规则。例如，如果一个`Hook`只在特定条件下被调用，那么在条件改变时，`React`将无法找到对应的状态，从而引发错误。

### 代码的可读性和可维护性

将`Hooks`放在条件语句或循环中会使得代码更难阅读和维护。开发者在阅读代码时，可能会对组件的状态来源和逻辑流程感到困惑。遵守`Hooks`的规则有助于保持代码的清晰和一致性。

## 结论

遵循`React`的规则，始终在组件的最顶层使用`Hooks`，可以避免许多常见的问题。这有助于确保组件的稳定性和可预测性，同时也使得代码更加清晰和易于维护。

React Hooks使用规则：为什么不在条件语句和循环中使用它们

> 2024年6月18日，细红线科技前端技术一面




1. 详细了解了上家公司都在做什么，包括技术栈、功能实现、产品优势（聊了接近20分钟）
2. 代码看输出，事件循环相关的，setTimeout、promise
3. 工作中遇到需要深拷贝的时候怎么处理的，如果自己手写需要注意什么
4. react为什么不建议在条件语句和循环语句里使用hooks
5. 检测括号是否合法，{{}}}}
6. v8的垃圾回收机制
7. 产品的各种开源版、saas版、私有化版是如何进行代码管理的，日常开发的分支是如何管理的，git merge、cherry pick

前端面经分享-细红线科技一面（罗永浩创业公司）

交易心得

> 今天参加了一个做生成式AI的初创公司【时代传浮】的笔试，一共六道题目，难度适中。





1. 写一个函数完成以下功能，给一个非负整数，判断其转换为二进制后，等于1的位数有几个，比如1234，转换为二进制是10011010010，1一共有5个，就输出5。

```js
function countBinaryOnes(num) {
    const binaryStr = num.toString(2);
    return binaryStr.split('1').length - 1;
}

console.log(countBinaryOnes(1234)); // 输出: 5
```

用toString应该是最简单的办法，还可以用位运算。

```js
function countBinaryOnes(num) {
  let count = 0;
  while (num > 0) {
    count += num & 1;
    num >>= 1;
  }
  return count;
}

console.log(countBinaryOnes(1234)); // 输出: 5
```

2. 给一个日期字符串，"2021/12/25"，接受一个参数n，如果n早于这个日期，就输出before，等于就输出now，大于就输出after，n的格式也是字符串，形如"2022/01/22"

```js
function compareToDate(n) {
  const date = "2021/12/25";
  const input = new Date(n).getTime();
  const reference = new Date(date).getTime();

  if (input < reference) {
    return 'before';
  } else if (input > reference) {
    return 'after';
  } else {
    return 'now';
  }
}

console.log(compareToDate("2022/01/22")); // 输出: after
console.log(compareToDate("2021/12/25")); // 输出: now
console.log(compareToDate("2020/11/24")); // 输出: before

```

这个题目比较简单，实现方式也比较多，比较笨的办法是可以通过split('/')截取为数组后，通过if判断依次比较年月日。

因为给定的日期字符串比较规则，new Date()是可以接受这个规则的日期字符串的，所以可以通过new Date()进行转换后直接比较，严谨点可以再调一下getTime()方法转换为标准的时间戳，因为直接new Date()转换的日期格式，相等的日期进行===比较是false，虽然不影响题目的完成，但是会不太严谨，转为标准时间戳就不存在任何问题了，大于小于等于都可以正常直接判断。

3. 给一个json，判断如果这个json是标准json就输出true，不标准要输出不标准的下标位置，比如{"a": 123]，要输出开始错误的位置下标。

```js
function validateJSON(jsonString) {
    try {
        JSON.parse(jsonString);
        return true;
    } catch (error) {
        return error.message.match(/position (\d+)/)[1];
    }
}

console.log(validateJSON('{"a":123}')); // 输出: true
console.log(validateJSON('{"a":123]')); // 输出: 8
```

这个如果要按json标准的规则去严格遍历查找的话，会很麻烦很麻烦，通过try catch，捕获JSON.parse的异常，异常里其实是有相关信息的。


![image.png](https://creatorblog.cn/static/img/ed3a73f8f15f58375be9d32424bd5828.image.webp)


最终目标是取出这个报错信息里的8，取的方式有很多很多，比较简单的是正则。

4. 跳房子，给定一个房子的距离n，一次只能跳1格 、2格 、3格，要注意的是，当前跳跃的格数不能等于上次跳转的格数，就是不能2、2这样跳，只能2、1、2或者2、3、2，输出要跳到n格一共有多少种跳法


5. 判断是否是ipv6的地址，ffff：ffff：ffff：ffff：ffff：ffff：ffff：ffff，一共8组16进制，可以省略0，比如ffff：0：ffff是对的，ffff：ab6：ffff也是对的，但是不能ffff：：ffff



6. 判断两个二叉树是否相等，即形态相等，且各个节点的值也相等

```js
function TreeNode(val, left, right) {
  this.val = (val===undefined ? 0 : val);
  this.left = (left===undefined ? null : left);
  this.right = (right===undefined ? null : right);
}

function isSameTree(p, q) {
  if (p === null && q === null) return true;
  
  if (p === null || q === null) return false;
  
  if (p.val !== q.val) return false;
  
  return isSameTree(p.left, q.left) && isSameTree(p.right, q.right);
}

const tree1 = new TreeNode(1, new TreeNode(2), new TreeNode(3));
const tree2 = new TreeNode(1, new TreeNode(2), new TreeNode(3));

console.log(isSameTree(tree1, tree2)); // 应该返回true
```

前端开发笔试面经2024/06/07

欢迎来到我的博客，这里是我分享前端、web3、理财、互联网等方面的知识和心得的地方。我是一名热爱编程的前端程序员，我希望通过我的博客能够帮助更多的人学习和进步。在这里，你可以找到最新最实用的前端技术教程，了解最前沿的互联网动态和趋势，掌握最有效的理财方法和策略。我也会不定期地发布一些个人项目和作品，展示我的创意和能力。如果你对我的博客感兴趣，欢迎你留言、评论、收藏、关注，也可以通过邮箱或社交媒体与我联系，交流学习和合作。谢谢你的支持！