Question

下面有一个名为TestComponent的组件，我想问一下我使用React.render在同一页面中呈现测试组件与我使用App中的TestComponent有什么区别.js

场景1

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class TestComponent extends Component {
componentDidMount(){
    console.log("Great");
}

render() {
    return (
        <p>
            {this.props.test}
        </p>
    );
 }}
ReactDOM.render(<TestComponent test="new" />);

场景2

App.js

import React, { Component } from 'react';
import './index.css';
import TestComponent from "./components/TestComponent"

class Apps extends Component {
  render() {

    return (
        <div>

             <TestComponent test={this.props.test}/>

        </div>
    );

}}
ReactDOM.render(<App test="new" />);

Answer 1

没有区别。唯一的区别是，在方案一中，您正在渲染一个组件，在方案二中，您正在渲染一个本身返回作为另一个要渲染的组件的组件。所以真的没有区别。

这就像在说

int i = 3;
return i * i;

然后做

int i = 1;
return (i + 2) * (i + 2);

因此，这实际上是组成问题。方案1渲染一个不包含任何其他组件的组件，方案2渲染一个不包含其他组件的组件。

在React.js中使用App.js和ReactDOM.render之间的区别

1 个答案: