Preact默认模板中render()方法的位置在哪里？

我太懂这种“文档写的和实际工具生成的代码不一样”的烦躁了——刚接触Preact的时候碰到这种情况，真的会忍不住怀疑是不是自己哪里弄错了！别担心，这只是两种不同项目搭建方式带来的差异，咱们把它拆解开来说清楚：

• 文档里的是「基础手动渲染模式」
  Preact官方文档里的render(App, document.body);是最底层的手动用法，针对的是从零手动搭建的项目场景：比如你自己配置Webpack、Babel，从空白文件开始写代码的时候，就需要手动引入Preact的render方法，明确指定把根组件挂载到DOM的某个节点上。这种方式给了你100%的配置控制权，但需要自己处理所有基础流程。

• preact-cli模板是「封装式约定模式」
  preact-cli作为官方脚手架，核心目标就是帮你简化开发流程，所以它把底层的渲染逻辑封装到了脚手架的内部配置或者约定的入口逻辑里：

  1. 它会自动生成带有根DOM节点的HTML模板（一般在public/index.html里能找到<div id="app"></div>）；
  2. 项目的入口文件（比如src/index.jsx）里其实已经包含了渲染逻辑，只是脚手架帮你做了封装，你看不到显式的render调用——有些新版模板甚至会用hydrate代替render，来支持服务端渲染的场景；
  3. 它遵循「约定大于配置」的原则，只要你把根组件放在约定的位置（比如src/App.jsx），脚手架就会自动把它挂载到预设的DOM节点上，完全不需要你手动写render代码。

• 核心逻辑其实是一致的
  不管是手动写render调用，还是用preact-cli生成模板，最终的结果都是把你的Preact应用注入到DOM中。区别只是preact-cli帮你省去了手动配置渲染逻辑的繁琐步骤，让你能更快地专注于业务代码的编写。

要是你好奇底层到底是怎么实现的，可以去看看项目里的src/index.jsx文件，有些模板里会有类似这样的代码（只是写法可能和文档里的略有不同）：

import { render } from 'preact';
import App from './App';

render(<App />, document.getElementById('app'));

如果你的模板里还是找不到，那就是脚手架把这部分逻辑完全封装到了构建流程里，但本质上做的事情和文档里的render(App, document.body);是一样的。

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