面试题：React服务端渲染中如何处理基本的点击事件

Question

在React服务端渲染（SSR）的场景下，假设有一个按钮元素，如何为其添加点击事件，并在点击时更新组件状态？请简要说明思路并给出关键代码示例。

Answer 1

思路

1. 在React组件中定义状态和处理点击事件的函数。
2. 使用useState钩子来管理状态。
3. 在按钮元素上通过onClick属性绑定点击处理函数。

关键代码示例

import React, { useState } from'react';

const ButtonComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <button onClick={handleClick}>
      Click me! Count: {count}
    </button>
  );
};

export default ButtonComponent;

在SSR场景下，上述代码逻辑同样适用。不过需要注意服务器端渲染过程和客户端渲染过程的衔接，确保状态在客户端水合（hydration）时能正确恢复。例如可以通过在服务器端渲染时将初始状态注入到HTML中，客户端渲染时从HTML中获取初始状态来进行水合操作。