React中查询数据库后如何实现数据展示？

你长期使用的「服务端查库→把数据当视图参数传给模板→渲染输出页面」的开发逻辑，在React生态里是完全有对应实现的，你想到的组件挂载时发fetch只是其中一种可选方案，不是唯一标准，不同方案的适配场景和你熟悉的传统开发模式可以完全对齐：

方案1：客户端请求渲染（你目前想到的实现） #

这是纯前端SPA架构下最基础的实现，和传统模板渲染的核心逻辑没有本质区别，仅差在数据传递的时机：不再由服务端在返回页面时直接携带数据，而是等浏览器加载完React的页面壳后，由前端代码主动发请求拉取数据，再把数据传给组件完成渲染。
基础实现示例：

import { useState, useEffect } from 'react';

function HomePage() {
  // 用本地state存储请求拿到的数据，对应模板引擎里的视图本地参数
  const [pageData, setPageData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  // 组件挂载时发起请求，和你预想的逻辑完全一致
  useEffect(() => {
    fetch('/api/get-home-data')
      .then(res => res.json())
      .then(data => {
        setPageData(data);
        setIsLoading(false);
      })
  }, []);

  if (isLoading) return <p>页面加载中</p>;
  // 拿到数据后直接渲染，和模板渲染的流程完全一致
  return <div>{pageData.pageContent}</div>;
}

这个方案的特点是前后端完全分离，不需要改动原有服务端逻辑，只需要提供返回数据的接口即可，非常适合后台管理系统、交互复杂度高的单页应用，也是React入门阶段最容易上手的实现方式，你想到的这个写法本身没有任何问题。

方案2：服务端渲染（和你原有开发逻辑完全对齐） #

如果你不想放弃之前「服务端查库→传参渲染」的开发习惯，完全可以直接把React组件当传统模板用，整个流程和你贴的Express模板代码相似度超过90%，仅需要替换最后一步渲染模板的步骤：

// Express服务端代码，和你原来的逻辑完全一致
app.get('/', async (req, res) => {
  // 还是原来的步骤：查数据库拿到fetched_data
  const fetchedData = await queryDBForPageData();

  // 原来的步骤是res.render('some_template_view', { fetched_data })
  // 现在只需要把传统模板文件换成React组件，把fetched_data作为props传进去就行
  const renderedReactHtml = renderToString(
    <HomePage initialData={fetchedData} />
  );

  // 直接把渲染好的HTML返回给浏览器
  res.send(`
    <html>
      <body>
        <div id="root">${renderedReactHtml}</div>
        <!-- 把初始数据同步传给客户端，避免页面 hydration 时重复发请求 -->
        <script>window.__INITIAL_PAGE_DATA__ = ${JSON.stringify(fetchedData)}</script>
      </body>
    </html>
  `)
})

对应的React组件根本不需要额外发请求，直接读服务端传进来的props就能渲染，和你在EJS、Pug等传统模板里使用传入变量的体验没有区别：

function HomePage({ initialData }) {
  // 直接用传入的参数渲染，完全适配你之前积累的开发经验
  return <div>{initialData.pageContent}</div>
}

这个方案的优势是首屏加载速度快，开发逻辑和你已经熟悉的模板开发流程完全衔接，不需要额外适应全新的工作流。

方案3：静态站点生成（构建阶段拉取数据渲染） #

如果是内容变动不频繁的页面，还可以在项目构建阶段就把数据库里的内容拉出来，提前把React组件编译成静态HTML文件部署到CDN上直接访问，连运行时的服务端查询和渲染开销都能省掉，性能表现更好。

• 如果你现在做的是纯前端项目，没有条件改动服务端逻辑，直接用组件挂载时发请求的方式就完全够用，没必要一开始就引入复杂的状态管理工具或SSR框架
• 如果你想尽量降低转React的学习成本，完全可以保留原有的Express查库逻辑，把React当模板引擎用，等熟悉组件写法之后再逐步调整架构
• 所有方案的核心逻辑本质上都和你熟悉的「把数据传给视图渲染」没有区别，仅存在数据传递时机、位置的差异而已

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