使用 setState 钩子在 ReactJS 中柯里化如何工作？

Question

我是 React 的新手，我正在使用我在过去几周学到的知识来构建一个使用 React 和 Material-UI 作为我的第一个项目的个人作品集。

在尝试构建一个简单的切换器以在单击按钮时从右侧弹出一个侧导航时，我在 React 中收到“错误：重新渲染太多”错误，并在 Navbar.js 中使用以下相关代码：

// states
const [state, setState] = useState({
    right: false
})
const toggleSlider = (open) => {
    setState({right: open})
}

// some lines of code after...

<Toolbar>
     <IconButton onClick={toggleSlider(true)}>
          <ArrowBack style={{ color: "tomato" }} />
     </IconButton>

     <Drawer anchor="right" open={state.right}>
          {sideList()}
     </Drawer>
</Toolbar>

After doing some research, it turns out I either need to use an arrow function for the onClick handler for <IconButton> , or I use a curried function for toggleSlider() in order to avoid the React re-render error:

// states
const [state, setState] = useState({
    right: false
})
const toggleSlider = (open) => () => {
    setState({right: open})
}

我的问题是：咖喱函数如何工作，为什么将onClick处理程序更改为箭头 function 或使处理程序成为咖喱 function 停止 React-render 错误？ 为什么它会阻止 React 一次又一次地渲染组件，就像我的代码在我添加咖喱 function 之前所做的那样？

谢谢你的帮助！

Answer 1

When you are passing the name of the function to onClick event, you are basically binding the event handler of the onClick onto your function.

当您在 function 之后使用括号时，您正在执行 function，而不是绑定它。

当您执行 function 时，它将更改右变量的 state，React 会将其解释为更改并重新渲染。

当 React 重新渲染时，您的 function 会再次执行。 然后无限循环发生。

当您使用=> fat arrow symbol时，您使用的模式应称为内联 function 。 它还将粗箭头 function 绑定到事件处理程序，而不执行 function。 因此，它不会重新渲染。

Answer 2

通过使用onClick={toggleSlider(true)}您正在调用toggleSlider(true)并将其返回值放在onClick上，这不是它应该如何工作的。 改用这个：

<IconButton onClick={() => toggleSlider(true)}>
    <ArrowBack style={{ color: "tomato" }} />
</IconButton>

稍微清理一下：

const [open, setOpen] = useState(false);

<Toolbar>
     <IconButton onClick={() => setOpen(true)}>
          <ArrowBack style={{ color: "tomato" }} />
     </IconButton>

     <Drawer anchor="right" open={open}>
          {sideList()}
     </Drawer>
</Toolbar>

虽然这实际上并没有切换，但它只是打开它。 如果要切换，请使用：

const [open, setOpen] = useState(false);

<Toolbar>
     <IconButton onClick={() => setOpen(!open)}>
          <ArrowBack style={{ color: "tomato" }} />
     </IconButton>

     <Drawer anchor="right" open={open}>
          {sideList()}
     </Drawer>
</Toolbar>