antd组件状态变换为啥要使用剪头函数

先看下代码

import React, {useState} from 'react';
import {Switch, Typography} from 'antd';

const {Paragraph, Text} = Typography;

const App: React.FC = () => {
const [ellipsis, setEllipsis] = useState(true);

return (
    <>

        //正确的
      <Switch checked={ellipsis}
        onChange={
          () => {
            setEllipsis(!ellipsis);
          }
        }/>
        //错误的
      <Switch checked={ellipsis}
        onChange={
          setEllipsis(!ellipsis)
        }/>

      <Paragraph ellipsis={ellipsis}>
        Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
                                                Design, a design language for background applications, is refined by Ant UED Team. Ant
                                                Design, a design language for background applications, is refined by Ant UED Team. Ant
                                                Design, a design language for background applications, is refined by Ant UED Team. Ant
                                                Design, a design language for background applications, is refined by Ant UED Team. Ant
                                                Design, a design language for background applications, is refined by Ant UED Team.
      </Paragraph>

      <Paragraph ellipsis={
        ellipsis ? {
          rows: 2,
          expandable: true,
          symbol: 'more'
        } : false
      }>
        Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
                                                Design, a design language for background applications, is refined by Ant UED Team. Ant
                                                Design, a design language for background applications, is refined by Ant UED Team. Ant
                                                Design, a design language for background applications, is refined by Ant UED Team. Ant
                                                Design, a design language for background applications, is refined by Ant UED Team. Ant
                                                Design, a design language for background applications, is refined by Ant UED Team.
      </Paragraph>

      <Text style={
          ellipsis ? {
            width: 200
          } : undefined
        }
        ellipsis={
          ellipsis ? {
            tooltip: 'I am ellipsis now!'
          } : false
      }>
        Ant Design, a design language for background applications, is refined by Ant UED Team.
      </Text>

      <Text code
        style={
          ellipsis ? {
            width: 200
          } : undefined
        }
        ellipsis={
          ellipsis ? {
            tooltip: 'I am ellipsis now!'
          } : false
      }>
        Ant Design, a design language for background applications, is refined by Ant UED Team.
      </Text>
    </>
);
};

export default App;

看下报错：

简单的解释：会在页面渲染的时候执行setState导致触发了reRender然后陷入死循环了。

这个例题也是可以看下比较有意思

他并不会报错的原因是无数次Math.random() > 0.5都为true的概率几乎为零

React报错之Too many re-renders-腾讯云开发者社区-腾讯云