Redfin React Server 页面开发指南：从入门到实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00013/article/details/148552102

Redfin React Server 页面开发指南：从入门到实践

react-server :rocket: Blazing fast page load and seamless navigation. 项目地址: https://gitcode.com/gh_mirrors/re/react-server

什么是页面？

在 Redfin React Server 框架中，页面是构成网站的基本单元，每个页面通常对应一个特定的URL地址。从技术角度看，页面是一个JavaScript对象，它包含了一系列生命周期方法，这些方法会在服务器端或浏览器端被调用，最终生成HTML内容。

页面通常以类的形式编写，但本质上它是一个包含特定生命周期方法的JavaScript对象。最简单的页面只需要实现一个getElements方法：

export default class SimplePage {
    getElements() {
        return <h1>Hello react-server</h1>;
    }
}

页面生命周期详解

理解页面生命周期对于开发高效、功能完善的页面至关重要。React Server 框架中的页面生命周期分为几个关键阶段：

1. 头部渲染阶段

这个阶段会并行调用以下方法（执行顺序不固定）：

renderDebugComments：用于渲染调试注释
renderTitle：设置页面标题
renderScripts：加载脚本文件
renderStylesheets：加载样式表

2. 元信息渲染阶段

在样式表加载完成后，会调用以下方法：

renderMetaTags：设置meta标签
renderLinkTags：设置link标签
renderBaseTag：设置base标签

这些内容会首先发送到浏览器。

3. 主体内容渲染阶段

接下来按顺序调用：

getBodyClasses：设置body元素的class
getBodyStartContent：body开始部分的内容
getElements：渲染页面主要内容

当到达首屏内容时，框架会开始发送JavaScript。

实战示例

完整页面开发

下面是一个完整的页面开发示例，展示了各种生命周期方法的使用：

import HttpStatus from 'http-status-codes';
import MobileEnabled from './middleware/MobileEnabled';
import ExampleComponent from './components/example-component';
import ExampleStore from './stores/example-store';
import exampleAction from './actions/example-action';

class ExamplePage {
    // 使用中间件
    static middleware() { return [MobileEnabled]; }

    // 路由处理
    handleRoute(next) {
        const params = this.getRequest().getQuery();
        this._exampleStore = new ExampleStore({
            id: +params.id
        });
        return next();
    }

    // 设置页面标题
    getTitle() {
        return "Example page"
    }

    // 加载样式表
    getHeadStylesheets() {
        return [
            "/styles/example.css",
            "/styles/reset.css"
        ]
    }

    // 设置meta标签
    getMetaTags() {
        return [
            { name: "example", content: "Demonstrate a full react-server page" },
        ];
    }

    // 设置link标签
    getLinkTags() {
        return [
            { rel: "prefetch", href: "//www.google-analytics.com" },
        ];
    }

    // 设置body的class
    getBodyClasses() {
        return ["responsive-page", "typography"];
    }

    // 渲染主要内容
    getElements() {
        return (
            <RootElement when={this._store.whenResolved()}>
                <h1>Example Page</h1>
                <ExampleComponent handleOnClick={exampleAction} {...this._exampleStore} />
            </RootElement>
        );
    }
}

JSON端点开发

React Server 也可以用来开发纯JSON API端点：

import getExampleData from './helpers/get-example-data';

export default class ExampleJsonPage {
    static middleware() { return [JsonEndpoint] }

    handleRoute() {
        const id = this.getRequest().getRouteParams().id;
        this.data = getExampleData(id);
        return {code:200};
    }

    getResponseData() {
        return this.data;
    }
}

页面片段开发

通过配置可以将页面设置为片段：

import exampleComponent from './components/example-component';
import exampleStore from './stores/example-store';

export default class ExampleFragmentPage {
    setConfigValues() { return { isFragment: true }; }

    handleRoute() {
        this._store = exampleStore({ id: this.getRequest().getRouteParams().id });
        return {code:200};
    }

    getTitle() {
        return "School Fragment";
    }

    getElements() {
        return (
            <RootElement when={this._store.whenResolved()}>
                <h1>My example fragment page</h1>
                <exampleComponent />
            </RootElement>
        );
    }
}