React Hooks 和 jsx-no-lambda 警告

Posted 2023-02-22

【中文标题】React Hooks 和 jsx-no-lambda 警告

【英文标题】：React Hooks and jsx-no-lambda warning

【发布时间】：2019-07-25 18:51:16

【问题描述】：

所以现在我们不能将钩子用作旧样式的事件函数，除了禁用警告之外，调用不违反规则的事件函数的最佳方法是什么

import React,  useState  from 'react';

function Example() 
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked count times</p>
      <button onClick=() => setCount(count + 1)> // Lambdas are forbidden in JSX attributes due to their rendering performance impact (jsx-no-lambda)
        Click me
      </button>
    </div>
  );

【问题讨论】：

const inc = () => setCount(prevCount => prevCount + 1); 然后<Button onClick=inc>

这只是抑制警告但没有改善。

@Monsignor 实际上这个问题不再有用了，因为 tslint 已被弃用，并且带有 typescript 插件的官方 CRA eslint 默认没有此规则。而且是的，只是禁用这个警告是最好的解决方案，除非 lambdas 真的影响你的应用程序或组件的性能

【参考方案1】：

使用钩子创建内联箭头函数的性能损失可以忽略不计，它比类组件具有的优势可以忽略不计，因此您不必担心渲染中的箭头函数。

您可以禁用此 eslint 规则。

但是，您仍然可以通过编写 increment 方法并使用 useCallback 挂钩来记忆它来改进您的代码。当您尝试将处理程序传递给嵌套组件时，这特别有用，然后您可以使用 React.memo

优化重新渲染

const Button = React.memo(function Btn(increment) 
    return (
       <button onClick=increment>
          Click me
      </button>
    )
)
function Example() 
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = React.useState(0);
  const increment = React.useCallback(() => 
      setCount(prev => prev+1);
  , [])
  return (
    <div>
      <p>You clicked count times</p>
      <Button increment=increment/>
    </div>
  );


ReactDOM.render(<Example />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="app"/>

【讨论】：

看来callBack的这种用法是错误的useCallback(fn, inputs) is equivalent to useMemo(() => fn, inputs).但是我们这里没有输入

@Amir-Mousavi，需要输入来告诉 useCallback 在这些输入发生变化时，它会创建一个新函数，但如果你不提供输入，它永远不会在创建后更新函数也不需要这样做，因为 setCount 使用函数回调模式

是的，这是我的意思，所以你在这里提供的 sn-p 有编译错误

在tsx，我们必须提供两个参数

@justin 在上面的例子中，useCallback 没有任何贡献。当您将其作为 props 传递给的组件不是 DOM 元素而是自定义反应组件时，它将很有用，在这种情况下，您可以使用 React.memo 或扩展 PureComponent 进行优化。我将更新我的答案以使其更清晰