React作为应用最为广泛的Web前端开发之一，在Web开发领域已经变得更加成熟和稳定。新版本发布的HookAPI/概念让组件更加方便易用。即便如此，React开发中还是有很多陷阱值得每一位React爱好者注意。陷阱一：使用函数式组件在React中有两种方式来组合组件：函数式组件和类组件。函数式组件比较直观，所以被广泛使用，但是函数式组件存在问题：不支持Hook函数，没有内部状态属性。错误代码示例：functionChongchong(props){return

Hello,{props.name}

;}问题分析：功能组件不支持Hook函数，比如组件加载后请求API获取数据.可能的。解决方案：使用class组件，可以获取Hook和state权重。陷阱二：错误使用useStateReact中最重要的概念就是状态的处理，通过它可以控制整个数据流和状态渲染。当需要重新渲染树时，状态更改首先发生。使用useStateHook，您可以在功能组件中定义状态。这是处理状态的一种简洁方便的方法。正因为如此，它经常被滥用。在例子中，假设有两个按钮，一个按钮用于计数，另一个按钮用于发送计数或触发动作。但是，当前数字永远不会显示在组件内部。仅当单击第二个按钮时才需要该请求。错误代码示例：问题分析：在反应时，每次状态变化都会强制组件及其子组件重新渲染。但是在上面的代码中，由于渲染部分没有用到state，所以每次设置counter，都会做一些不必要的渲染，会影响性能，可能会产生副作用。解决方案：如果要在组件内部使用变量，变量值在渲染前后都要保持不变，不强制重新渲染，可以使用useRefHook。它保留值并且不强制组件重新渲染。陷阱三：用router.push代替links假设你要写一个按钮，然后点击按钮，要求用户重定向到另一个页面。既然如此，这个操作将是一个客户端路由机制。所以需要某种图书馆来做到这一点。在react中，最常用的是react-router:错误代码示例：问题分析：这个对大部分用户来说都很好用，但是它的可访问性还是有问题。该按钮根本没有标记为链接到另一个页面，这使得屏幕阅读器几乎无法识别该按钮。可能无法在新选项卡或窗口中打开。解决方案：跳转链接应尽可能使用组件或常规标签。陷阱4：通过useEffect处理动作React引入的最常用和最好的Hook之一是“useEffect”Hook。这个Hook允许处理与道具或状态变化相关的动作。效果很好，但经常放错地方可能不需要。组件场景：组件获取项目列表并将其呈现给dom。此外，如果请求成功，将调用“onSuccess”函数，该函数作为prop传递给组件。错误代码示例：问题分析：以上代码使用了两个useEffectHooks，第一个Hook处理初始渲染时的API调用，第二个Hook调用onSuccess函数：假设没有加载，没有错误但是status是数据，它必须被成功调用。没错，而且可能永远不会失败。这样一来，动作与需要调用的函数之间的直接联系也就失去了。不能保证这只会在成功获取操作后发生。解决方法：最直接的方法是将onSuccess函数设置为调用成功的实际位置：现在一看，准确的显示是调用api成功了onSuccess。陷阱#5：混合多个事件什么时候应该将一个组件拆分成几个更小的组件？你如何构建组件树？在使用基于组件的框架时，每天都会出现所有这些问题。然而，设计组件时的一个常见错误是将两个用例组合到一个组件中。下面的示例假设您希望将标题显示为移动设备上的BurgerButton按钮或桌面屏幕上的标签。错误代码示例：问题分析：该方法中为HeaderInner组件设置了两种状态。这会使在别处测试或重用该组件变得更加困难。解决方法：为了清楚的区分事件，需要设置Header，Tabs或者BurgerButton，不要把这两个东西混在一起。陷阱六：useEffectHook处理多个事件例如，假设有一个组件以某种方式从后端获取一些数据，并且还根据当前位置显示Breadcrumbs。错误代码示例：问题分析：有两个用例，即“数据采集”和“显示面包屑”。两者都使用useEffectHook进行了更新。更改useEffect时将运行单个Hook。问题是当位置发生变化时，函数也会被调用，这会产生副作用。解决方案：拆分效果，确保它们只用于一种效果，这样副作用也会消失。总而言之，在React中编写组件时有很多陷阱。如何合理避免这些常见错误，可以让我们的程序更加健壮，提高我们的编程能力。