React中编写多行onClick函数的最佳方式：是否应提取至return外部？

当然应该把这个多行的点击处理逻辑移到return语句外面！这么做有几个实打实的好处：

• 提升代码可读性：把业务逻辑从JSX模板里抽离出来，模板结构会清爽很多
• 方便复用：之后如果其他组件或元素需要同样的用户选择逻辑，直接调用这个函数就行
• 便于测试：单独的函数更容易编写单元测试，验证逻辑是否正确

具体实现方法： #

1. 在组件内部（return之前）定义一个接收user参数的处理函数，把原来内联的setSelectedUser和setShowUser逻辑放进去
2. 在Button的onClick属性里，通过箭头函数调用这个抽离的函数并传入当前user对象

修改后的完整代码如下：

const UserList = () => {
  const [users, setUsers] = useState([])
  const [selectedUser, setSelectedUser] = useState()
  const [showUser, setShowUser] = useState(true)

  const onHandleClick = () => setShowUser(false)

  // 抽离出来的用户选择处理函数
  const handleUserSelect = (user) => {
    setSelectedUser(user);
    setShowUser(true);
  }

  useEffect(() => {
    fetch(URL)
      .then(res => res.json())
      .then(json => setUsers(json));
  }, [])

  return (
    <>
      <Header>
        <h1>Contact list</h1>
      </Header>
      <Container>
        <div>
          {users.map(user => (
            <div key={user.id}>
              {/* 这里直接调用抽离的函数，传入当前user */}
              <Button onClick={() => handleUserSelect(user)}>{user.name}</Button>
            </div>
          ))}
        </div>
        {selectedUser && (
          <>
            {showUser ? (
              <UserDetail 
                name={selectedUser.name} 
                username={selectedUser.username} 
                email={selectedUser.email} 
                address={selectedUser.address.street} 
                phone={selectedUser.phone} 
                company={selectedUser.company.name} 
                onClick={onHandleClick} 
              /> 
            ) : false}
          </>
        )}
      </Container>
    </>
  )
}

额外优化小技巧： #

如果担心每次组件渲染都创建新的箭头函数（虽然这个场景下性能影响极小），还可以用useCallback来缓存这个处理函数，避免子组件不必要的重渲染：

import { useCallback } from 'react';

// ...

const handleUserSelect = useCallback((user) => {
  setSelectedUser(user);
  setShowUser(true);
}, []); // 依赖项为空即可，因为setSelectedUser和setShowUser是React稳定提供的函数

这样调整后，代码结构更整洁，逻辑也更易于维护啦！

内容的提问来源于stack exchange，提问作者dannuzak