reactjs - 在组件类之外使用react更新组件 Prop

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>
        );
    }
});

您可以看到“VIEWS”常量变量包含 2 个 View ，VIEW_MAIN 和 VIEW_SUB。每个 View 都是 React 组件。

两个组件都有相同的属性，名为“someProps”。现在，这就是问题所在。我想将“AppContent”组件的属性添加到两个 React 组件中，但是当然，这是不可能的，因为它们超出了类定义。

所以将它们移到类定义中，问题是我不知道应该放在哪里。我应该放在“渲染”方法中吗？我认为这是个坏主意，因为 render 方法会执行很多次。

如果我使用“class”关键字而不是使用createClass，我认为如果定义“VIEWS”常量变量代码位于构造函数(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 方法，并在渲染调用时执行它。它工作正常，但问题总是在渲染 AppContent 组件上执行“_initViews”方法。我只想执行一次，我认为像这样使用 React 是个坏主意。

我应该使用 Class 关键字吗？据我所知，React 内部有“setProps”方法，但现在已弃用，而且我也认为使用 setProps 方法是个坏主意。

有没有办法可以实现我正在尝试的良好实践或更好的解决方案？如果是的话，我将非常感谢您的建议。

Answer 1

您应该实现stateless functions 。填写VIEWS使用这些函数并在您的应用程序中调用它替换 {renderDOM}通过类似 <renderDOM someProps={this.props.some}/>

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