Question

在React中进行rending时，无状态函数组件和公共组件之间有什么区别？我无法理解！如何获得有关它们之间差异的详细信息！谢谢！

// Stateless function components  
const renderIcon = result => {
   return <a href={result.url} target="_blank"><Icon type="icon-fail"/></a>;
};

const Page = props => {
    // ...
    return (
        <div>
            ...
            {renderIcon(props.result)}
            ...
        </div>
   );
};


const ResultIcon = ({result}) => {
    return <a href={result.url} target="_blank"><Icon type="icon-success"/></a>;
};

const Page = props => {
// ...
    return (
        <div>
            ...
            <ResultIcon result={props.result} />
            ...
        </div>
    );
};

一些代码我在项目中添加了一些代码，有两种方法可以渲染组件，但完美滚动条的显示方式不同。我不知道为什么！

    // parts of codes
const data = [...data] // ...some dates used
return <div className="parts_codes">
    {
        [
            {
                title: 'Table',
                components: [
                    {
                        dataType: 'basiclist',
                        DataComponent: ({mainTableData}, index) =>
                            <MainTable
                                loading={mainTableDataStatus}
                                // ...
                            />,
                    }
                ]
            },
            {
                title: 'String',
                components: [
                    {
                        dataType: 'Object',
                        DataComponent: ({type}, index) => (!type || status)
                            ?
                            <Spin key={index} />
                            :
                            <div key={index}>
                                <PlotComponent />
                            </div>
                    }, {
                        dataType: 'Object',
                        DataComponent: ({type}, index) => (!type || status)
                            ?
                            <Spin key={index} />
                            :
                            <div key={index}>
                                key={index}
                            >
                                <ColumnComponent />
                            </div>

                    }
                ]
            },
        ].map((item) => <div key={item.title} className="map_parts">
            <span>{item.title}</span>
            {
                item.components.map((details, index) => {
                    const {dataType, DataComponent} = details;
                    return <DataComponent index={index} data={data}/>       
// one component perferc-scrollbar instance failed
                    // return DataComponent(data, index);       
// another functional component perferc-scrollbar instance success
                })
            }
        </div>)
    }
</div>

class MainTable extends Component {
    componentDidUpdate() {
        // ... do perferc-scrollbar instance
    }

    render() {
        return <Table />
    }
}

Answer 1

问题编辑后

根据评论，我收集了您的实际问题，为什么您提供的确切代码段失败。

看起来这是你遇到麻烦的部分。虽然我不确定。围绕它的评论不清楚。但我认为它现在不起作用。

item.components.map((details, index) => {
                    const {dataType, DataComponent} = details;
                    return <DataComponent index={index} data={data}/>       
// one component perferc-scrollbar instance failed
                    // return DataComponent(data, index);       
// another functional component perferc-scrollbar instance success
                })

details.DataComponent似乎是一个组件生成函数。您可以尝试将return <DataComponent...更改为return details.DataComponent({type: "Whatever type value is"}, index);

然而，该代码似乎是混合数据和组件。总的来说，我不确定你在做什么或试图做什么，但凭借我有限的知识，我期待更多的东西：

const DataComponent = ({type,index, status, data}) => {
    if(!type || status) {
        return <Spin key={index} />
    }
    else {
        // I assume plot component needs the 'data'
        return <div key={index}><PlotComponent data={data}/></div>
    }
}

然后，您的每个DataComponent: () => ...作业都将成为：data:"The data object for the graph"。

最后，你的内部地图语句中的return语句将是return <DataComponent type={"Whatever type is"} status={"Whatever status is"} index={index} data={details.data} />;。

旧答案

这些都是无状态功能组件。您在哪里听说过常见的组件＆＃39;？这不是我听说过的事情。如果您可以提供一些指向您正在阅读的材料的链接，那将会很有帮助。

定义组件的另一种方法是继承React.Component：

class Welcome extends React.Component {
      render() {
        return <h1>Hello, {this.props.name}</h1>;
      }
}

功能组件（如示例中的组件）只是一个功能;与使用继承构建的组件的render()中的相同。

关于＆＃39;无国籍＆＃39;：在编程中，＆＃39;州＆＃39;是一个概念，指的是从一个执行到下一个执行的数据。无状态组件不承载任何数据。他们不能，因为他们只是一个功能而不是一个阶级。

这使它们更简单但更具可预测性。将相同的参数多次发送到无状态组件，您将得到相同的结果。

通过示例更清楚。提供了许多here in the official documentation。

Answer 2

基本上我们使用无状态 功能组件当我们不需要使用生命周期方法而不需要使用状态时，这就是为什么它被称为无状态（没有状态）。因此我们不需要继承React.Component类，我们只需要使用props数据直接返回 JSX 。我建议您查看react文档。

React - 无状态函数组件和公共组件之间有什么区别

2 个答案: