Question

我在创建React应用时遇到了一些问题。这是问题所在：

import React from 'react';

const VIEW_MAIN = 0;
const VIEW_SUB = 1;

const VIEWS = {};
VIEWS[VIEW_MAIN] = (<ViewMain someProps={...} />);
VIEWS[VIEW_SUB] = (<ViewSub someProps={...} />);

const AppContent = React.createClass({
    render() {

        let renderDOM = null;

        if(this.props.view === VIEW_MAIN) {
            renderDOM = VIEWS[VIEW_MAIN];
        }
        else {
            renderDOM = VIEWS[VIEW_SUB];
        }

        return (
            <div id="ViewContainer">
                {renderDOM}
            </div>
        );
    }
});

你可以看到＆＃34; VIEWS＆＃34;常量变量包含2个视图，VIEW_MAIN和VIEW_SUB。每个视图都是React Component。

两个组件都具有相同的属性，名为＆＃34; someProps＆＃34;。现在，这就是问题所在。我想添加＆＃34; AppContent＆＃34;的属性组件分为两个React组件，但当然，这是不可能的，因为它们不属于类定义。

所以把它们移到课堂定义中，问题是我不知道应该放在哪里。我应该放在＆＃34;渲染＆＃34;方法？我认为这是个坏主意，因为render方法会执行很多次。

如果我使用＆＃34; class＆＃34;关键字而不是使用createClass，我认为如果定义＆＃34; VIEWS＆＃34;常量变量代码在构造函数（constructor（））中，但我不想使用它们。

我暂时输入了这样的代码：

const AppContent = React.createClass({
    _initViews() {
        if(typeof this.VIEWS === 'undefined') {
            this.VIEWS = {};
            this.VIEWS[VIEW_MAIN] = (<ViewMain someProps={this.props.some} />);
            this.VIEWS[VIEW_SUB] = (<ViewSub someProps={this.props.some} />);
    },
    render() {
        this._initViews();

        ...
    }
});

我在类中添加了_initialViews方法，并在render调用时执行它。它工作正常，但问题始终是执行＆＃34; _initViews＆＃34;渲染AppContent组件的方法。我只想执行一次，我认为使用这样的反应是个坏主意。

我应该只使用Class关键字吗？正如我所听到的，有＃34; setProps＆＃34; React内部的方法，但现在已弃用，我也认为使用setProps方法是个坏主意。

有什么方法可以通过良好实践或更好的解决方案进行尝试吗？如果是的话，非常感谢它给我的建议。

Answer 1

您应该实施stateless functions。使用这些功能填写VIEWS并在您的应用中将其称为{renderDOM}替换<renderDOM someProps={this.props.some}/>

为避免多次渲染组件，请使用shouldComponentUpdate。否则，即使组件被多次重新渲染，如果生成的虚拟DOM与浏览器DOM一致，则页面上也不会刷新这些组件。

Answer 2

ReactJS就是渲染应用程序的状态。当状态发生变化时，您再次渲染整个应用程序。诀窍是ReactJS快速完成，感谢Virtual Dom。

回答你的问题：可以多次渲染组件。

查看介绍视频：https://facebook.github.io/react/docs/videos.html

反思部分的思考：https://facebook.github.io/react/docs/thinking-in-react.html

在组件类

2 个答案: