你在使用 React 吗？那我想你一定知道这个

在撰写本文时，React 的版本是17.02。看到这个库的指数级增长令人着迷。每个人都在用 React 以惊人的速度和效率编写代码。但是，仍然有很多兔子洞，大多数程序员都陷入了术语的泥潭。

如果你使用 React 有一段时间了，那么我认为你有时会遇到 React 的奇怪行为，例如：

1. 太多次重新渲染错误
2. setState() 等的异步行为。

因此，在本文中，我将讨论一些我们必须小心的情况🔍

✂ 使用默认值解构 props :-

React 组件严重依赖于通过 props 传递的数据，无论是状态对象还是回调函数。在实际使用 props 之前处理并销毁它们是一种很好的做法。它可以降低代码的错误率，并增强代码的健壮性，从而应对输入的不确定性行为。

const ChildComponent = ({ username = null }) => {
            return (
            <>
                <p> Hello ! {username ?? "Anonymous"} </p>
            </>
        )
    }

此处，为了避免出现未定义错误，此代码片段中的 props 被解构为默认值。此外，在使用 props 时，需要使用??运算符，以避免任何进一步的冲突。

😷 使用 useMemo() ：

每次状态更改都会带来重新渲染虚拟 DOM 的开销。有时这种重新渲染的开销较小，但有时确实会带来影响。因此，当重新渲染发生时，函数体内部的每一段代码都会被重新定义，因此没有必要重新渲染“哑代码”。因为它不会改变其功能。因此，我们使用 useMemo() 。

const ExecuteCounter = React.memo((data, callback) => {
return({
<button onChange={callback}> Increment </button>
}))

大家应该注意到，执行计数器是 DUMB 组件。因此，这里将其包装在 memo() 中。这样，只有当 props 发生变化时，才会重新渲染 ExecuteCounter()。

🔨 setState() 是异步的：

setState() 本质上是异步的。当我们在回调函数中调用 setState() 时，它不会立即更新状态，而是会批量处理后续更改，并在完成后应用它们。这避免了 setState() 在重新渲染时进行大量计算所带来的繁重工作。

这可能是很多人没有预料到的，但值得在这里提一下。将 setState() 设置为异步的原因很简单。由于 JavaScript 是单线程的，将 setState() 设置为同步会阻塞浏览器的主执行线程，最终导致页面无响应。因此，为了避免这种情况，React 的开发团队将 setState() 设置为异步的。

如果我们在调用 setState() 后立即查询状态值，许多开发人员都会遇到这种情况

🎉 使用 thunk() ：

如果有人已经使用过 Redux，可能知道这一点，但我还是会解释一下。使用 Actios 在 Redux Reducer 中进行异步更改非常容易。但是，任何新手都曾尝试过从 Redux 的 Actions 中发出 Ajax 请求，那么这里有一个技巧：

在 redux 中创建存储时，我们必须将 redux thunk 包装在创建存储中

import thunk from 'redux-thunk'

const middelware = [thunk]

const store = createStore(rootReducer, applyMiddleware(middelware))

此后，你可以像这样从动作创建者那里发送异步请求

const get userInfo = (userId) => async (dispatch) => {
   try {
    //fetch data 

    dispatch({ type : "ACTION_TYPE" : payload : "VIRUS"})

   } catch (err) {
     console.log("err", err.message")
   }

}

这是 thunk 的一个简单示例。我们可以利用它执行比简单的 Ajax 请求更多的操作。

😎 最终观点：

在 React 中重新渲染组件会花费更多。避免重新渲染那些愚蠢的代码可以显著提高渲染速度，并避免用户与应用程序交互过程中出现任何陷阱或延迟。

感谢阅读🙏